0

I'm trying to create a donut chart with pure CSS and achieved it almost. But now, having a hard time to implement a popover or tooltip to each slice of a donut chart.When I hover one slice,its showing the other slice too.

Is there any way to show it's specific popover or tooltip when hovering each slice of this donut chart.

I have added my code link below, for the reference.

<div class="circ">       
            <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>  
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
            <div class="inner-circle"></div>
     </div>

https://codepen.io/subasooriyakumaran/pen/zXRBeP

temp
  • 265
  • 1
  • 4
  • 12
  • Frankly, doing this with CSS is a nightmare, SVG would be the way to go and would be much simpler to initiate pop-ups without the z-index issues.. - https://stackoverflow.com/questions/27943053/how-to-create-a-circle-with-links-on-border-side – Paulie_D Apr 17 '19 at 11:07
  • @Paulie_D I even tried google charts and some donut chart svg images. but in svg I coudn't add any popovers. In google chart donut, I couldn't add icons. – temp Apr 17 '19 at 11:16
  • Nope...not a chart or an image... **actual SVG**...see the link. – Paulie_D Apr 17 '19 at 11:20
  • @Paulie_D okay,ill check it – temp Apr 17 '19 at 11:34

1 Answers1

0

You can try this way if you want to solve using css. customize it according to your design requirement 

#tooltip {
  // position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

#tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

#tooltip:hover .tooltiptext {
  visibility: visible;
}

Your html code goes here

          <div class="sect" id="tooltip">
              <span class="tooltiptext">Tooltip text</span>
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
codeuix
  • 1,366
  • 1
  • 12
  • 18