Как добавить всплывающую подсказку в div - PullRequest
Новая
       25

Как добавить всплывающую подсказку в div

515 голосов
/ 19 августа 2011

У меня есть тег div следующим образом: 

<html>
    <head></head>
    <body>
        <div>
            <label>Name</label>
            <input type="text"/>
        </div>
    </body>
</html>

Теперь я хочу простой JavaScript для отображения всплывающей подсказки на :hover div. Всплывающая подсказка также должна иметь эффект постепенного исчезновения.

Ответы [ 26 ]

1 голос
/ 22 ноября 2017

Вы также можете использовать это как всплывающую подсказку ... Это работает так же, но вы должны написать дополнительный тег, вот и все .. 

<abbr title="THis is tooltip"></abbr>
1 голос
/ 22 ноября 2017

Вы можете попробовать всплывающие подсказки. 

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

дальнейшее чтение здесь

1 голос
/ 15 октября 2017

Всплывающие подсказки Положение чистого CSS 

      div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
							
        text-align: center;
      }  					
	
      .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;
      }		
					
      .toolLeft {
        top: -5px;
        right: 105%;
      }					
					
      .toolRight {
        top: -5px;
        left: 105%;
      }
					
      .toolTop {
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
      }
					
      .toolBottom {
        top: 100%;
        left: 50%;
        margin-left: -60px;
      }
    <div>
			
      <div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br />
      <div class="tooltip">Left  <span class="tooltiptext toolLeft">Tooltip text</span></div><br />			
      <div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br />
      <div class="tooltip">Bottom  <span class="tooltiptext toolBottom">Tooltip text</span></div><br />			
			
    </div>
1 голос
/ 17 ноября 2017

И моя версия 

.tooltip{
display: inline;
position: relative; /** very important set to relative*/

} 

.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title); /**extract the content from the title */
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;

} 

.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;

}

Тогда HTML 

<div title="This is some information for our tooltip." class="tooltip">bar </div>
0 голосов
/ 21 января 2019

Azle имеет хорошую реализацию. Скажем, мой целевой элемент - это значок с именем класса "my_icon". Просто выберите целевой элемент, используя функцию add_tooltip Azle: 

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!"
})

enter image description here

Вы можете управлять положением и стилем всплывающей подсказки, используя обычный стиль CSS . Приведенная выше подсказка оформлена следующим образом: 

az.style_tooltip('my_tooltip', 1, {
    "background" : "black",
    "margin-left" : "10px",
    "color" : "hotpink",
    "font-weight" : "bold",
    "font-family" : "Arial",
    "padding" : "10px",
    "border-radius" : "10px"
})

Мы также можем добавить изображение во всплывающую подсказку, указав «image_path»: 

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!",
    "image_path" : "https://cdn-images-1.medium.com/max/1874/1*toepgVwopga9TYFpSkSxXw.png",
    "image_class" : "my_image"
})

enter image description here

Так как мы указали "image_class" выше, мы можем стилизовать изображение , используя ту же функцию style_tooltip, на этот раз нацеливаясь на изображение. Приведенное выше игровое изображение было оформлено следующим образом: 

az.style_tooltip('my_image', 1, {
    "width" : "50px",
    "align" : "center"
})

Вот пример использования увеличенного изображения :

enter image description here

... добавлено и оформлено следующим образом: 

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "MORE INFO<br><br>",
    "image_path" : "https://i0.wp.com/proactive.ie/wp-content/uploads/2017/11/Infographic.jpg?resize=1240%2C1062&ssl=1",
    "image_class" : "my_image"
})

az.style_tooltip('my_image', 1, {
    "width" : "500px"
})

Вот GIST всего кода.

Вы можете поиграть в эту FIDDLE .

0 голосов
/ 23 ноября 2017 
<div title="tooltip text..">
    Your Text....
</div>

Самый простой способ добавить подсказку к элементу div.

Страница:
...