将工具提示添加到div


566

我有这样的div标签:

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

如何:hover在div 上显示工具提示,最好具有淡入/淡出效果。


2
对于简单的CSS + JavaScript解决方案,我认为您无法在stackoverflow.com/questions/15702867/…上
Rick Hitchcock


Answers:


892

对于基本工具提示,您需要:

<div title="This is my tooltip">

对于更高级的javascript版本,您可以查看以下内容:

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

上面的链接为您提供了25个工具提示选项。


2
标题工具提示需要注意的一件事是,如果用户单击div,则工具提示将不会出现。这可能非常令人沮丧……尤其是在您的div看起来应该被单击的情况下。例如:style =“ cursor:指针;”
RayLoveless 2014年

2
@RayL单击工具提示不是标准行为-这会模糊链接和工具提示,从而使用户无法知道突出显示的单词是1)提供更多信息还是2)将其完全带到另一个页面。一般来说,不好的做法。
sscirrus

@sscirrus,我同意。这就是为什么不应该使用“光标:指针;”来设置工具提示的原因。(鼓励点击),这是我经常看到的。
RayLoveless

18
如果您只想显示一段文本的工具提示,例如某些关键字的“详细信息”或类似内容,请<abbr title="...">...</abbr>改为使用;浏览器通常使用带短划线的圆点/点来表示此样式,表示“还有更多要说的,请参阅我的工具提示”。
leemes 2014年

2
在Chrome上,可能需要几秒钟的时间才能显示工具提示。我觉得有点慢。
AndroidDev '17

292

这是可以做到只用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:此浏览器的范围非常广泛,但请考虑对旧IE使用javascript后备(如果需要)。

注意2:增强功能可能是添加一些JavaScript,以通过更改应用于鼠标的类来计算鼠标位置并将其添加到伪元素中。


1
@AndreaLigios可以更改此设置,以便在未显示时工具提示缩放为1x1px,并且该像素应位于文本的0,0坐标处吗?当前演示中有一个小故障:将鼠标放在演示中第三个div下方的区域时,工具提示开始出现,但随后远离鼠标指针,因此返回到其初始位置,即再次欺骗了出现。发生的速度惊人得令人印象深刻,并且闪烁。
约翰

1
好答案安德里亚(Andrea),公认的答案已经过时了。jsfiddle帮助了很多人。
jhhoff02 '02 -10-4

2
我喜欢这个问题有两个很好的答案。一个简单,另一个可定制。
罗默(Rohmer)

2
这太棒了!但是:我们如何在此处添加换行符?它似乎被忽略<br>,其他类似的\n\r仅作为纯文本出现在字符串其余部分中的字符串。更新:我刚刚注意到设置最大宽度会使它自动调整其内容并放置换行符。真整洁!(但是,如果有人知道答案,我还是会感激的)
LinusGeffarth

2
@LinusGeffarth,您可以使用空白:预包装;在当前的Chrome上。我还没有测试其他浏览器。
Taugenichts

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>


是的,但是如果OP希望以某种方式设置工具提示的样式,那么CSS实现会更好
Yvonne Aburrow 17-11-21

2
@YvonneAburrow此答案不仅适用于OP。
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属性。标题属性中的任何文本都将出现在工具提示中。

注意:禁用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服务器端魔术。
2011年

5
.net代码在那里显示截断。使用html和CSS的方法仍然有效。
Mark Swardstrom

1
这是最简单,最好的解决方案,因为它不依赖JS。只需将span.showonhover设置为焦点,或将span.hovertext移至链接中,屏幕阅读器便可以完全访问它(因此比title-attribute解决方案更好)。哦,忘了<%#...%>
chaenu 2014年

15

这是一个纯CSS 3实现(带有可选的JS)

唯一要做的就是在任何称为“ data-tooltip”的div上设置一个属性,当您将鼠标悬停在其上时,该文本将显示在其旁边。

我提供了一些可选的JavaScript,这些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中消失。
Ke Vin

我想知道工具提示是否在鼠标位置消失。伟大的定制。
安德烈·梅斯基塔

5

您可以使用data属性,伪元素等创建自定义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>

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都为这种简单的事情提出了复杂的解决方案。谢谢。
schlingel

4

您可以在切换孩子的div onmouseoveronmouseout如下:

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中的示例


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


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-2用相同的方式创建一个div ...当然,您也可以使用title属性而不是data属性。


1
为什么您会使用id来设置您想要更多实例的样式,然后[id^=tooltip]在可能只使用了class和的情况下使用选择器.tooltip呢?
Stephan Muller 2014年

你是对的。我从id开始,所以一直跟着走,完全错过了它。但是,有人可能会从中受益。哦,顺便说一下,我们甚至可以使用属性选择器来选择“数据标题”(例如, div[data-title])无需添加额外的标记。)
designcise 2014年

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>


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

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>



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>

1

Azle有一个不错的实现。假设我的目标元素是一个图标,其类名为“ my_icon”。只需使用Azle的 add_tooltip函数定位元素:

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

我们还可以通过指定“ 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"
})

在此处输入图片说明

由于我们在上面指定了“ 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

您可以在此FIDDLE中玩耍


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>


-1
<div title="tooltip text..">
    Your Text....
</div>

将工具提示添加到div元素的最简单的方法。


3
抱歉,Kartik,在多个答案和评论中都说了同样的话。您的贡献没有添加任何东西:(
brasofilo
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.