1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

SVG maps with tooltips

Discussion in 'HTML & Website Design' started by fealost, Apr 13, 2018.

0
  1. #1
    I made interactive SVG map using Adobe Illustrator and some styled tooltip which shows after hover in these case - text .tooltip-item below svg. What I need is set my tooltip effect from text .tooltip-item to the svg map like hover each of the stars with different tooltip content.

    I hover 1st star -> my tooltip appears with text1 than I hover 2nd star -> tooltip appears with text 2 etc. (text1, text2.. are similar but have different values, I have to apply there links and change color like now, also stars could change color and opacity after hover)

    Here's my JSFiddle and my code below

    html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
  </head>

  <body>
    <div class="content">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px" height="561.46px" viewBox="0 0 1000 561.46" enable-background="new 0 0 1000 561.46" xml:space="preserve">
             <image overflow="visible" width="960" height="539" xlink:href="http://zielonekamionki.pl/new/wp-content/uploads/2018/04/milky_way.jpg"  transform="matrix(1.0417 0 0 1.0417 0 9.765625e-04)">
            </image>
            <a xlink:href="#"><polygon fill="#FFFFFF" points="226.5,172.62 253.33,255.21 340.17,255.21 269.92,306.25 296.75,388.84 226.5,337.8 156.25,388.84
                183.08,306.25 112.83,255.21 199.67,255.21 "/></a>
            <a xlink:href="#"><polygon fill="#FFFFFF" points="499.51,172.62 526.34,255.21 613.18,255.21 542.93,306.25 569.76,388.84 499.51,337.8
                429.26,388.84 456.09,306.25 385.84,255.21 472.68,255.21 "/></a>
            <a xlink:href="#"><polygon fill="#FFFFFF" points="773.5,172.62 800.33,255.21 887.17,255.21 816.92,306.25 843.75,388.84 773.5,337.8 703.25,388.84
                730.08,306.25 659.83,255.21 746.67,255.21 "/></a>
        </svg>
      <div class="tooltip tooltip-effect-1">
        <div clas="tooltip-item">Text with tooltip</div>
        <div class="tooltip-content clearfix">
          <div class="tooltip-text">
            <ul>
              <li>
                <h3>Dom na sprzedaż: A1</h3>
              </li>
              <li>Powierzchnia użytkowa (m<sup>2</sup>): 100,69</li>
              <li>Cena brutto: 349 000zł</li>
              <li><a href="http://google.pl">Karta domu</a> <i>1000kb</i></li>
              <li>Dostępność <span style="color:red">Sprzedane</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>
    HTML:
    css

    body {
  margin: 0;
}

.content {
  margin: 0 auto;
  width: 100%;
  display: block;
}

svg {
  width: 100%;
}

svg a {
  opacity: 1;
  transition: 0.2s opacity;
}

svg a:hover {
  opacity: 0.3;
}

.tooltip {
  position: relative;
  z-index: 999;
  margin-top: 5%;
  margin-left: 10%;
}

.tooltip-item {
  cursor: pointer;
  text-align: center;
  font-weight: 700;
  padding-left: 10%;
  padding-right: 10%;
}

.tooltip-item::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 20px;
  bottom: 100%;
  left: 50%;
  pointer-events: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.tooltip:hover .tooltip-item::after {
  pointer-events: auto;
}

.tooltip-content {
  position: absolute;
  z-index: 9999;
  width: 200px;
  left: 50%;
  margin: 0 0 20px -300px;
  bottom: 100%;
  text-align: left;
  font-size: 0.765em;
  line-height: 1.4;
  box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
  background: #2a3035;
  opacity: 0;
  cursor: default;
  pointer-events: none;
}

.tooltip-effect-1 .tooltip-content {
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
}

.tooltip:hover .tooltip-content {
  pointer-events: auto;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
  transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
}

.tooltip-content::after {
  content: '';
  top: 100%;
  left: 50%;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: #2a3035;
  border-width: 10px;
  margin-left: -10px;
}

.tooltip-text {
  font-size: 0.68em;
  line-height: 1.65;
  display: block;
  padding: 0 2.21em 2.21em 2.31em;
  color: #fff;
}

.tooltip-text ul {
  padding: 0;
}
    Code (CSS):
     
    fealost, Apr 13, 2018 IP