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

569

У меня есть тег div, как это:

<div>
  <label>Name</label>
  <input type="text"/>
</div>

Как я могу отобразить всплывающую подсказку о :hoverdiv, желательно с эффектом постепенного появления / исчезновения.

javascript html css tooltip user475685
источник
2
Для простого решения CSS + JavaScript, я не думаю, что вы можете превзойти пост Дэниела Иммса на stackoverflow.com/questions/15702867/…
Рик Хичкок
1
Только CSS3
Андреа Лиджиос
stackoverflow.com/questions/36275678/…
Пуджа Кедар

Ответы:

897

Для основной подсказки вы хотите:

<div title="This is my tooltip">

Для более интересной версии JavaScript вы можете посмотреть:

https://jqueryhouse.com/best-jquery-tooltip-plugins/

Приведенная выше ссылка дает вам 25 вариантов подсказок.

sscirrus
источник
2
Одна вещь, на которую стоит обратить внимание при использовании всплывающей подсказки для заголовка, - если пользователь щелкнет на элементе div, подсказка не появится. Это может быть очень неприятно ... особенно, если ваш div выглядит так, как будто его нужно щелкнуть. Например: стиль = "курсор: указатель;"
RayLoveless
2
@RayL Это не стандартное поведение для всплывающей подсказки - это размывает ссылки и всплывающие подсказки, не давая пользователю знать, будет ли выделенное слово 1) давать им больше информации или 2) переносить их на другую страницу целиком. В общем, плохая практика.
sscirrus
@sscirrus Я согласен. Вот почему вы не должны стилизовать ваши подсказки с помощью «курсора: указатель;» (поощряет щелчок), который я вижу слишком часто.
RayLoveless
18
Если вы хотите показать всплывающую подсказку только для некоторого фрагмента текста, например «детали» для какого-либо ключевого слова или что-то подобное, используйте <abbr title="...">...</abbr>вместо этого; Браузеры обычно подчеркивают это подчеркиванием штрихами / точками, что указывает на то, что «есть что сказать, см. мою подсказку».
Leemes
2
В Chrome отображение всплывающей подсказки может занять несколько секунд. На мой взгляд, медленно.
AndroidDev
293

Это может быть сделано только с помощью CSS , без JavaScript вообще : запуск демо

  1. Примените пользовательский атрибут HTML, например. data-tooltip="bla bla"к вашему объекту (div или что-то еще):

    <div data-tooltip="bla bla">
    something here
</div>

  2. Определите :beforeпсевдоэлемент каждого [data-tooltip]объекта как прозрачный, абсолютно позиционированный и со data-tooltip=""значением в качестве содержимого:

    [data-tooltip]:before {            
    position : absolute;
     content : attr(data-tooltip);
     opacity : 0;
}

  3. Определите :hover:beforeсостояние зависания каждого, [data-tooltip]чтобы сделать его видимым:

    [data-tooltip]:hover:before {        
    opacity : 1;
}

  4. Примените ваши стили (цвет, размер, положение и т. Д.) К объекту подсказки; конец истории.

В демонстрации я определил другое правило, чтобы указать, должна ли всплывающая подсказка исчезать при наведении на нее, но вне родителя, с другим настраиваемым атрибутом data-tooltip-persistentи простым правилом:

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

Примечание 1: охват браузером для этого очень широк, но рассмотрите возможность использования запасного варианта JavaScript (если необходимо) для старого IE.

Примечание 2: улучшением может быть добавление небольшого количества javascript для вычисления положения мыши и добавления его к псевдоэлементам путем изменения применяемого к нему класса.

Андреа Лигиос
источник
1
@AndreaLigios Можно ли это изменить, чтобы всплывающая подсказка масштабировалась до 1x1px, когда она не показана, и этот пиксель должен находиться где-то в 0,0 координатах текста? В настоящее время в демонстрации наблюдается сбой: при наведении указателя мыши на область ниже третьего делителя в демонстрационной части появляется всплывающая подсказка, но затем она удаляется от указателя мыши и возвращается к исходной позиции, которая снова обманывает появившееся. Это происходит невероятно быстро и показывает мерцание.
Джон
1
Отличный ответ Андреа, принятый ответ устарел. Jsfiddle очень помог.
jhhoff02
2
Мне нравится, что есть два отличных ответа на этот вопрос. Один простой, а другой настраиваемый.
Rohmer
2
Это круто! Но: как мы можем добавить разрыв строки здесь? Похоже, что игнорировать <br>и другие, как \nили \rкак они просто отображаются в виде простого текста в остальной части строки. Обновление: я только что заметил, что установка максимальной ширины заставляет его автоматически корректировать содержимое и ставить разрывы строк. Действительно аккуратно! (Однако, если кто-то знает ответ, я все равно буду признателен за это)
LinusGeffarth
2
@LinusGeffarth вы можете сделать это с пробелами: pre-wrap; на текущий Chrome. Я не проверял другие браузеры, хотя.
Таугенихтс
83

Вам не нужен JavaScript для этого вообще; просто установите titleатрибут :

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>

Обратите внимание, что визуальное представление всплывающей подсказки зависит от браузера / ОС, поэтому оно может исчезнуть, а может и нет. Тем не менее, это семантический способ создания всплывающих подсказок, и он будет корректно работать с такими программами, как программы чтения с экрана.

Демо-версия в стеке фрагментов

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>
Развернуть фрагмент

cdhowie
источник
правда, но если ОП хочет как-то
стилизовать
2
@YvonneAburrow Этот ответ не только для ОП.
cdhowie
справедливо. Но иногда нужно написать эссе во всплывающей подсказке, и в этой ситуации titleатрибут просто не обрезает его.
Ивонн Абурроу
@YvonneAburrow ... Вот почему есть несколько ответов. Если вам нужно что-то простое и быстрое, titleработает. Есть и другие ответы, которые являются более сложными, если вам нужно что-то более сложное. Я, честно говоря, не уверен, что вы пытаетесь сделать здесь.
cdhowie
17

Вот хорошая подсказка jQuery:

https://jqueryui.com/tooltip/

Чтобы реализовать это, просто выполните следующие действия:

  1. Добавьте этот код в свои <head></head>теги:

    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>    
<script type="text/javascript">
$("[title]").tooltip();
</script> 
<style type="text/css"> 

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
    display:none;
    background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff;
}
</style>

  2. Для элементов HTML, для которых вы хотите иметь всплывающую подсказку, просто добавьте titleк ней атрибут. Какой бы текст ни был в атрибуте title, он будет отображаться во всплывающей подсказке.

Примечание. Когда JavaScript отключен, он возвращается к всплывающей подсказке браузера / операционной системы по умолчанию.

Натан
источник
16

Я сделал то, что должно быть в состоянии адаптироваться и к div.

HTML

<td>
    <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
    <span class="showonhover">
        <a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
        <span class="hovertext">
            <%# Eval("Name") %>
        </span>
    </span>
</td>

CSS

.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}

Для более глубокого обсуждения, см. Мой пост:

Простой форматированный текст всплывающей подсказки при наведении

Нарнии
источник
8
Вопрос был для решения html, а не какой-то магии на стороне сервера .net.
Михал Шрайер
5
Код .net находится там, чтобы показать усечение. Подход с использованием html и css по-прежнему действителен.
Марк Свардстрем
1
Это самое простое и лучшее решение, поскольку оно не зависит от JS. Просто сделайте span.showonhover фокусируемым или переместите span.hovertext в ссылку, и вы будете полностью доступны для программ чтения с экрана (и, следовательно, лучше, чем решение с атрибутом title). Ох, и забудь про <% # ...%>
chaenu
15

Вот чистая реализация CSS 3 (с дополнительным JS)

Единственное, что вам нужно сделать, это установить атрибут для любого элемента div, называемого «data-tooltip», и этот текст будет отображаться рядом с ним при наведении на него курсора.

Я включил дополнительный JavaScript, который будет вызывать всплывающую подсказку рядом с курсором. Если вам не нужна эта функция, вы можете спокойно игнорировать часть JavaScript этой скрипки.

Если вы не хотите постепенного появления состояния при наведении, просто удалите свойства перехода .

Он стилизован как titleподсказка свойства. Вот JSFiddle: http://jsfiddle.net/toe0hcyn/1/

Пример HTML:

<div data-tooltip="your tooltip message"></div>

CSS:

*[data-tooltip] {
    position: relative;
}

*[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;

    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;

    display: block;
    font-size: 12px;
    line-height: 16px;
    background: #fefdcd;
    padding: 2px 2px;
    border: 1px solid #c0c0c0;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}

*[data-tooltip]:hover::after {
    opacity: 1;
}

Необязательный JavaScript для изменения местоположения всплывающей подсказки мыши:

var style = document.createElement('style');
document.head.appendChild(style);

var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
    var attr = allElements[i].getAttribute('data-tooltip');
    if (attr) {
        allElements[i].addEventListener('mouseover', hoverEvent);
    }
}

function hoverEvent(event) {
    event.preventDefault();
    x = event.x - this.offsetLeft;
    y = event.y - this.offsetTop;

    // Make it hang below the cursor a bit.
    y += 10;

    style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px  }'

}
Стивен Линн
источник
12

Хорошо, вот все ваши требования к награде:

  • Нет jQuery
  • Мгновенное появление
  • Не исчезает, пока мышь не покинет область
  • Включен эффект постепенного исчезновения
  • И наконец .. простое решение

Вот демо и ссылка на мой код (JSFiddle)

Вот функции, которые я включил в эту скрипку JS, CSS и HTML5:

  • Вы можете установить скорость исчезновения.
  • Вы можете установить текст всплывающей подсказки с помощью простой переменной.

HTML:

<div id="wrapper">
    <div id="a">Hover over this div to see a cool tool tip!</div>
</div>

CSS:

#a{
    background-color:yellow;
    padding:10px;
    border:2px solid red;    
}

.tooltip{
    background:black;
    color:white;
    padding:5px;
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 1);
    border-radius:10px;
    opacity:0;
}

JavaScript:

var div = document.getElementById('wrapper');
var a = document.getElementById("a");
var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10
                    // seconds to fade in and out and 1 will take 0.01 sec.
var tipMessage = "The content of the tooltip...";

var showTip = function(){    
    var tip = document.createElement("span");
    tip.className = "tooltip";
    tip.id = "tip";
    tip.innerHTML = tipMessage;
    div.appendChild(tip);
    tip.style.opacity="0"; // to start with...
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)+0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "1"){
            clearInterval(intId);
        }
    }, fadeSpeed);
};
var hideTip = function(){
    var tip = document.getElementById("tip");
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)-0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "0"){
            clearInterval(intId);
            tip.remove();
        }
    }, fadeSpeed);
    tip.remove();
};

a.addEventListener("mouseover", showTip, false);
a.addEventListener("mouseout", hideTip, false);
Аншу Двабхаши
источник
Быстрое перемещение курсора внутрь и наружу порождает несколько всплывающих подсказок, которые не исчезнут в вашем jsfiddle.
Ке Вин
Интересно, появляется ли всплывающая подсказка в позиции мыши? Отличная настройка.
Андре Мескита
5

Вы можете создавать собственные всплывающие подсказки CSS, используя атрибут данных, псевдоэлементы и т content: attr(). Д.

http://jsfiddle.net/clintioo/gLeydk0k/11/

<div data-tooltip="This is my tooltip">
    <label>Name</label>
    <input type="text" />
</div>

, 

div:hover:before {
    content: attr(data-tooltip);
    position: absolute;
    padding: 5px 10px;
    margin: -3px 0 0 180px;
    background: orange;
    color: white;
    border-radius: 3px;
}

div:hover:after {
    content: '';
    position: absolute;
    margin: 6px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid orange;
    border-bottom: 5px solid transparent;
}

input[type="text"] {
    width: 125px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Клинт Браун
источник
4

Простейшим способом было бы установить position: relativeна содержащий элемент и position: absoluteна элемент подсказки внутри контейнера, чтобы он плавал относительно родительского (содержащего элемента). Например:

<div style="background: yellow;">
    <div style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />

        <div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
            Tooltip text
        </div>
    </div>
</div>
designcise
источник
4

Вы можете использовать заголовок. это будет работать практически для всего

<div title="Great for making new friends through cooperation.">

<input script=JavaScript type=button title="Click for a compliment" onclick="window.alert('Your hair reminds me of a sunset across a prairie')" value="making you happy">

<table title="Great job working for those who understand the way i feel">

просто подумайте о любом теге, который можно увидеть в окне html, и вставьте в title="whatever tooltip you'd like"него тег, и вы получите подсказку.

Ронни Мэтьюз
источник
Я не понимаю, почему у вас так мало голосов. Я был уверен, что есть простое решение, но люди, как и w3schools, предлагают сложные решения для такой простой вещи. благодарю вас.
Шлингель
4

Вы можете переключать дочерний div во время onmouseoverи onmouseoutвот так:

function Tooltip(el, text) {
  el.onmouseover = function() {
    el.innerHTML += '<div class="tooltip">' + text + '</div>' 
    }
  el.onmouseout = function() {
    el.removeChild(el.querySelector(".tooltip"))
  }
}

//Sample Usage
Tooltip(document.getElementById("mydiv"),"hello im a tip div")

Пример в фрагментах стека и jsFiddle

Показать фрагмент кода

ProllyGeek
источник
3 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI tooltip</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
  <script>
  $(function() {
    $("#tooltip").tooltip();
  });
  </script>
</head>
<body>
<div id="tooltip" title="I am tooltip">mouse over me</div>
</body>
</html>

Вы также можете настроить стиль всплывающей подсказки. Пожалуйста, обратитесь по этой ссылке: http://jqueryui.com/tooltip/#custom-style

sanman
источник
3

Решение только для CSS3 может быть:

CSS3: 

div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left:  0; right: 0; z-index: 1000;}

HTML5:

<div style="background: yellow;">
    <div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />
    </div>
</div>

Затем вы можете создать tooltip-2div таким же образом ... вы также можете использовать titleатрибут вместо dataатрибута.

designcise
источник
1
Почему, черт возьми, вы используете идентификатор для стилизации чего-то, о чем вы хотите больше экземпляров, а затем используете [id^=tooltip]селектор, когда вы могли просто использовать класс и .tooltip?
Стефан Мюллер,
Вы правы. Я начал с идентификаторов, поэтому следил за этим и полностью пропустил это. Но кто-то может извлечь из этого пользу. Да, и между прочим, мы могли бы даже использовать селектор атрибутов для того, чтобы выбрать «data-title» (например, div[data-title])без необходимости добавлять дополнительную разметку.
designcise
3

Попробуй это. Вы можете сделать это только с помощью CSS, и я добавил только data-titleатрибут для всплывающей подсказки.

.tooltip{
  position:relative;
  display: inline-block;
}
.tooltip[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #fff;
  position: absolute;
  left: 0;
  top: 110%;
  white-space: nowrap;  
  border-radius: 5px;  
  background:#000;
}
<div data-title="My tooltip" class="tooltip">
    <label>Name</label>
    <input type="text"/>
</div>
Развернуть фрагмент

Анкита Патель
источник
3

Я разработал три типа эффекта затухания:

/* setup tooltips */
    .tooltip {
      position: relative;
    }
    .tooltip:before,
    .tooltip:after {
      display: block;
      opacity: 0;
      pointer-events: none;
      position: absolute;
    }
    .tooltip:after {
    	border-right: 6px solid transparent;
    	border-bottom: 6px solid rgba(0,0,0,.75); 
      border-left: 6px solid transparent;
      content: '';
      height: 0;
        top: 20px;
        left: 20px;
      width: 0;
    }
    .tooltip:before {
      background: rgba(0,0,0,.75);
      border-radius: 2px;
      color: #fff;
      content: attr(data-title);
      font-size: 14px;
      padding: 6px 10px;
        top: 26px;
      white-space: nowrap;
    }

    /* the animations */
    /* fade */
    .tooltip.fade:after,
    .tooltip.fade:before {
      transform: translate3d(0,-10px,0);
      transition: all .15s ease-in-out;
    }
    .tooltip.fade:hover:after,
    .tooltip.fade:hover:before {
      opacity: 1;
      transform: translate3d(0,0,0);
    }

    /* expand */
    .tooltip.expand:before {
      transform: scale3d(.2,.2,1);
      transition: all .2s ease-in-out;
    }
    .tooltip.expand:after {
      transform: translate3d(0,6px,0);
      transition: all .1s ease-in-out;
    }
    .tooltip.expand:hover:before,
    .tooltip.expand:hover:after {
      opacity: 1;
      transform: scale3d(1,1,1);
    }
    .tooltip.expand:hover:after {
      transition: all .2s .1s ease-in-out;
    }

    /* swing */
    .tooltip.swing:before,
    .tooltip.swing:after {
      transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
      transform-origin: 0 0;
      transition: transform .15s ease-in-out, opacity .2s;
    }
    .tooltip.swing:after {
      transform: translate3d(0,60px,0);
      transition: transform .15s ease-in-out, opacity .2s;
    }
    .tooltip.swing:hover:before,
    .tooltip.swing:hover:after {
      opacity: 1;
      transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
    }

    /* basic styling: has nothing to do with tooltips: */
    h1 {
      padding-left: 50px;
    }
    ul {
      margin-bottom: 40px;
    }
    li {
      cursor: pointer; 
      display: inline-block; 
      padding: 0 10px;
    }
 <h1>FADE</h1>

      <div class="tooltip fade" data-title="Hypertext Markup Language">
      <label>Name</label>
      <input type="text"/>
      </div>
      

    <h1>EXPAND</h1>

      <div class="tooltip expand" data-title="Hypertext Markup Language">
      <label>Name</label>
      <input type="text"/>
      </div>
      

    <h1>SWING</h1>

      <div class="tooltip swing" data-title="Hypertext Markup Language"> 
      <label>Name</label>
      <input type="text"/>
      </div>
Развернуть фрагмент

Ним Патель
источник
3

Вот простая реализация всплывающей подсказки, которая учитывает положение вашей мыши, а также высоту и ширину вашего окна:

function showTooltip(e) {
  var tooltip = e.target.classList.contains("tooltip")
      ? e.target
      : e.target.querySelector(":scope .tooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}
.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .tooltip {
    display: block;
}

.tooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    padding: 5px;
    z-index: 1000;
    color: black;
}
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="tooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="tooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="tooltip">This is yet
another tooltip</span></span>.
Развернуть фрагмент

(см. также эту скрипку )

Джон Слегерс
источник
2

Без использования API Вы также можете сделать что-то подобное, используя чистый CSS и Jquery Demo.

HTML

<div class="pointer_tooltip"> 
    Click & Drag to draw the area
</div>

CSS

.pointer_tooltip{
  width : auto;
  height : auto;
  padding : 10px;
  border-radius : 5px;
  background-color : #fff;
  position: absolute;
}

Jquery

$(document).mousemove(function( event ) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";   

    //set the actuall width
    $('.pointer_tooltip').width($('.pointer_tooltip').width());
    var position_top = event.pageY+18;
    var position_left = event.pageX-60;          
    var width=$('body').width()-$('.pointer_tooltip').width();

    //check if left not minus
    if(position_left<0){
      position_left=10;
    }else if(position_left > width){
     position_left=width-10;
    }       


    $('.pointer_tooltip').css('top',position_top+'px');
    $('.pointer_tooltip').css('left',position_left+'px');
});
Амин Кодаганур
источник
2

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

HTML

<div class="tooltip"> Name
    <span class="tooltiptext">Add your tooltip text here.</span>
</div>

CSS

.tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 270px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
Фейсал
источник
2

Подсказки Положение чистого 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>
Развернуть фрагмент

antelove
источник
2

Вы можете сделать это с помощью простого CSS ... jsfiddleздесь вы можете увидеть пример

код CSS для всплывающей подсказки

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
Сатьяджит Рут
источник
2

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

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

введите описание изображения здесь

Вы можете контролировать положение и стиль всплывающей подсказки, используя обычные стили 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"
})

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

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"
})

введите описание изображения здесь

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

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

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

введите описание изображения здесь

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

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 всего кода.

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

кибернетический
источник
1

Есть много ответов на этот вопрос, но все же может быть, он кому-нибудь поможет. Это для всех левых, правых, верхних, нижних позиций.

Вот CSS:

    .m-tb-5 {
        margin-top: 2px;
        margin-bottom: 2px;
    }
    [data-tooltip] {
        display: inline-block;
        position: relative;
        cursor: help;
        padding: 3px;
    }
    /* Tooltip styling */
    [data-tooltip]:before {
        content: attr(data-tooltip);
        display: none;
        position: absolute;
        background: #000;
        color: #fff;
        padding: 3px 6px;
        font-size: 10px;
        line-height: 1.4;
        min-width: 100px;
        text-align: center;
        border-radius: 4px;
    }
    /* Dynamic horizontal centering */
    [data-tooltip-position="top"]:before,
    [data-tooltip-position="bottom"]:before {
        left: 50%;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    /* Dynamic vertical centering */
    [data-tooltip-position="right"]:before,
    [data-tooltip-position="left"]:before {
        top: 50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    [data-tooltip-position="top"]:before {
        bottom: 100%;
        margin-bottom: 6px;
    }
    [data-tooltip-position="right"]:before {
        left: 100%;
        margin-left: 6px;
    }
    [data-tooltip-position="bottom"]:before {
        top: 100%;
        margin-top: 6px;
    }
    [data-tooltip-position="left"]:before {
        right: 100%;
        margin-right: 6px;
    }

    /* Tooltip arrow styling/placement */
    [data-tooltip]:after {
        content: '';
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }
    /* Dynamic horizontal centering for the tooltip */
    [data-tooltip-position="top"]:after,
    [data-tooltip-position="bottom"]:after {
        left: 50%;
        margin-left: -6px;
    }
    /* Dynamic vertical centering for the tooltip */
    [data-tooltip-position="right"]:after,
    [data-tooltip-position="left"]:after {
        top: 50%;
        margin-top: -6px;
    }
    [data-tooltip-position="top"]:after {
        bottom: 100%;
        border-width: 6px 6px 0;
        border-top-color: #000;
    }
    [data-tooltip-position="right"]:after {
        left: 100%;
        border-width: 6px 6px 6px 0;
        border-right-color: #000;
    }

    [data-tooltip-position="left"]:after {
        right: 100%;
        border-width: 6px 0 6px 6px;
        border-left-color: #000;
    }
    /* Show the tooltip when hovering */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        display: block;
        z-index: 50;
    }

И тег HTML может быть таким:

<p data-tooltip-position="right" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="left" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="top" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="bottom" data-tooltip="Some tooltip text here" title="">Text Here</p>

MJ
источник
1

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

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

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

1inMillion
источник
1

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

<abbr title="THis is tooltip"></abbr>

источник
1

И моя версия

.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

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

<style>
.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;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Information</span>
</div>
Люблю кумар
источник
Это было скопировано с w3schools.com/css/css_tooltip.asp
Марк Кортинк
-1 
<div title="tooltip text..">
    Your Text....
</div>

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

Картик Арора
источник
3
Извини, Картик, то же самое было сказано в нескольких ответах и ​​комментариях. Ваш вклад ничего не добавляет :(
brasofilo