Как добавить всплывающую подсказку или всплывающую подсказку к каждому фрагменту кольцевой диаграммы - PullRequest
Новая
       18

Как добавить всплывающую подсказку или всплывающую подсказку к каждому фрагменту кольцевой диаграммы

0 голосов
/ 17 апреля 2019

Я пытаюсь создать кольцевую диаграмму с чистым 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

1 Ответ

0 голосов
/ 17 апреля 2019

Вы можете попробовать этот способ, если хотите решить с помощью 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>
...