看起来实际上有一个纯CSS的解决方案，只需要CSS attr表达式，生成的内容和属性选择器(这表明它可以追溯到IE8):

https://jsfiddle.net/z42r2vv0/2/

一个{ 位置:相对; 显示:inline-block; margin-top: 20 px; ｝ 【标题】:{后盘旋:: 内容:attr(标题); 位置:绝对的; 上图:-100%; 左:0; ｝ <a href="http://www.google.com/" title="Hello world!"> 盘旋在我身边 < / >

update w/ input from @ViROscar:请注意，没有必要使用任何特定的属性，尽管我在上面的例子中使用了“title”属性;实际上我的建议是使用“alt”属性，因为有一些机会，内容将被无法从CSS受益的用户访问。

再次更新，我没有改变代码，因为“title”属性基本上意味着“tooltip”属性，这可能不是一个好主意，隐藏重要的文本在一个字段中，只有在hover可访问，但如果你有兴趣使这个文本可访问，“aria-label”属性似乎是最好的地方:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

我在这里找到了答案:http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

我自己的代码是这样的，我改变了属性名，如果你保持属性的标题名，你最终会有两个弹出相同的文本，另一个变化是我的文本在悬停显示在暴露的文本下面。

.tags { display: inline; position: relative; } .tags:hover:after { background: #333; background: rgba(0, 0, 0, .8); border-radius: 5px; bottom: -34px; color: #fff; content: attr(data-gloss); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 350px; } .tags:hover:before { border: solid; border-color: #333 transparent; border-width: 0 6px 6px 6px; bottom: -4px; content: ""; left: 50%; position: absolute; z-index: 99; } <a class="tags" data-gloss="Text shown on hovering">Exposed text</a>

无法设置默认浏览器工具提示的样式。但是您可以使用javascript创建自己的自定义HTML工具提示。

本机工具提示不能设置样式。

也就是说，你可以使用一些库，在元素悬停时显示样式浮动层(而不是本地工具提示，并抑制它们)，只需要很少或根本不需要修改代码……

这里有一个用于自定义工具提示模式的jsfiddle

它基于CSS定位和伪类选择器

检查MDN文档以获得伪类的跨浏览器支持

    <!-- HTML -->
<p>
    <a href="http://www.google.com/" class="tooltip">
    I am a 
        <span> (This website rocks) </span></a>&nbsp; a developer.
</p>

    /*CSS*/
a.tooltip {
    position: relative;
}

a.tooltip span {
    display: none;    
}

a.tooltip:hover span, a.tooltip:focus span {
    display:block;
    position:absolute;
    top:1em;
    left:1.5em;
    padding: 0.2em 0.6em;
    border:1px solid #996633;
    background-color:#FFFF66;
    color:#000;
}

CSS不能改变工具提示的外观。它依赖于浏览器/操作系统。如果你想要一些不同的东西，你必须使用Javascript来生成标记，当你把鼠标悬停在元素上，而不是默认的工具提示。