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

484

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

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

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

Показать ещё 1 комментарий
Теги:
tooltip

26 ответов

721
Лучший ответ

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

<div title="This is my tooltip">

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

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

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

[Оригинальная ссылка, в настоящее время в основном устаревшая: http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632]

Поделиться
  • 0
    Одна вещь, на которую стоит обратить внимание при использовании всплывающей подсказки для заголовка, - если пользователь щелкнет на элементе div, подсказка не появится. Это может быть очень неприятно ... особенно если ваш div выглядит так, как будто его нужно щелкнуть. Например: стиль = "курсор: указатель;"
  • 2
    @RayL Это не стандартное поведение для всплывающей подсказки - это размывает ссылки и всплывающие подсказки, не давая пользователю знать, будет ли выделенное слово 1) давать им больше информации или 2) переносить их на другую страницу целиком. В общем, плохая практика.
Показать ещё 5 комментариев
233

Это можно сделать только с CSS, без javascript: работающая демонстрация

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

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

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

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

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

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

  • Применить стили (цвет, размер, положение и т.д.) к объекту всплывающей подсказки; конец истории.

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

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

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

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

Поделиться
  • 0
    Какой старый IE здесь? IE 7? IE 8?
  • 4
    @Quentin IE8 работает: caniuse.com/#feat=css-gencontent
Показать ещё 18 комментариев
75

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

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

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

Увидеть:

<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
Поделиться
  • 0
    true, но если OP хочет каким-то образом стилизовать всплывающую подсказку, тогда реализация CSS лучше
  • 2
    @YvonneAburrow Этот ответ не только для ОП.
Показать ещё 2 комментария
17

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

https://jqueryui.com/tooltip/

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

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

    <script type="text/javascript" src="/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>

  • В 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 комментарий
14

Здесь чистая реализация 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  }'

}
Поделиться
11

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

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

Вот демо и ссылка на мой код (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);
Поделиться
  • 0
    Быстрое перемещение курсора внутрь и наружу порождает несколько всплывающих подсказок, которые не исчезнут в вашем jsfiddle.
  • 0
    Исправлено @KeVin jsfiddle.net/anshudwibhashi/a4zoxy3b/2
Показать ещё 1 комментарий
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>
Поделиться
4

Как насчет этого, извините, код не оптимизирован, потому что он спешит, но я думаю, вы получите идею:

http://jsfiddle.net/prollygeek/1b0Lrr8d/

//Auxiliary functions
function createToolTip(divName,tips)
{
 document.getElementById(divName).innerHTML+='<div class="tooltip">'+tips+'</div>' 
}
function removeToolTip(divName)
{
document.getElementById(divName).removeChild( document.getElementById(divName).getElementsByClassName("tooltip")[0])
}
function Tooltip(divName,tips)
{
document.getElementById(divName).onmouseover=function(){createToolTip(divName,tips)}

document.getElementById(divName).onmouseout=function(){removeToolTip(divName)}
}

//Sample Usage
Tooltip("mydiv","hello im a tip div")
Поделиться
4

Вы можете создавать собственные всплывающие подсказки 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;
}
Поделиться
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

Попробуйте это. Вы можете сделать это только с помощью 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

Решение только для 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>

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

Поделиться
  • 0
    Почему, черт возьми, вы будете использовать идентификатор для стилизации чего-то, что вы хотите создать больше экземпляров, а затем использовать селектор [id^=tooltip] , когда вы могли просто использовать класс и .tooltip ?
  • 0
    Ты прав. Я начал с идентификаторов, поэтому последовал за ним и полностью пропустил его. Но кто-то может извлечь из этого пользу. Да, и между прочим, мы могли бы даже использовать селектор атрибута для того, чтобы выбрать «data-title» (например, div[data-title]) без добавления дополнительной разметки.
3 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI tooltip</title>
  <link rel="stylesheet" href="/jquery-ui.css">
  <script src="/jquery-1.10.2.js"></script>
  <script src="/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

Поделиться
2

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

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

вы можете сделать это с помощью простого 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

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

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

<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" внутри него, и вы получили всплывающую подсказку.

Поделиться
2

Без использования API Вы можете сделать что-то подобное, используя чистые CSS и JQuery Демо

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');
});
Поделиться
1

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

<abbr title="THis is tooltip"></abbr>
Поделиться
1

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

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

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

Поделиться
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>
Поделиться
1

Подсказки Позиция чистая 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

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

Вот 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>

Поделиться
0

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

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

Изображение 2622

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

Изображение 2623

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

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

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

Изображение 2624

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

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 
<div title="tooltip text..">
    Your Text....
</div>

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню