时间戳

首页 > 解决方案 > 如何向圆环图的每个切片添加弹出框或工具提示

css - 如何向圆环图的每个切片添加弹出框或工具提示

问题描述

我正在尝试用纯 CSS 创建一个甜甜圈图并几乎实现了它。但是现在，很难为圆环图的每个切片实现弹出框或工具提示。当我悬停一个切片时，它也会显示另一个切片。

悬停此甜甜圈图的每一片时，有什么方法可以显示它的特定弹出框或工具提示。

我在下面添加了我的代码链接，以供参考。

<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

标签： csshtmlsassdonut-chart

解决方案

如果您想使用 css 解决，您可以尝试这种方式。根据您的设计要求进行定制

#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;
}

你的 html 代码在这里

          <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>

推荐阅读