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

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

我想我应该在这里发布我的20行JavaScript解决方案。这不是完美的，但可能是有用的，这取决于你需要从你的工具提示。

什么时候使用

自动为定义了TITLE属性的所有HTML元素设置工具提示的样式(这包括将来动态添加到文档中的元素) 无需对每个工具提示进行Javascript/HTML更改或hack(只需TITLE属性，语义清晰) 非常轻(增加了大约300字节的压缩和压缩) 您只需要一个非常基本的可设置样式的工具提示

什么时候不使用

需要jQuery，所以如果你不使用jQuery就不要使用 对嵌套元素都有工具提示的不支持 您需要在屏幕上同时显示多个工具提示 您需要工具提示在一段时间后消失

的代码

// Use a closure to keep vars out of global scope
(function () {
    var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
    DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
    showAt = function (e) {
        var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
        $("#" + ID).html($(e.target).data(DATA)).css({
            position: "absolute", top: ntop, left: nleft
        }).show();
    };
    $(document).on("mouseenter", "*[title]", function (e) {
        $(this).data(DATA, $(this).attr("title"));
        $(this).removeAttr("title").addClass(CLS_ON);
        $("<div id='" + ID + "' />").appendTo("body");
        showAt(e);
    });
    $(document).on("mouseleave", "." + CLS_ON, function (e) {
        $(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
        $("#" + ID).remove();
    });
    if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

粘贴到任何地方，即使在DOM准备好之前运行这段代码，它也应该工作(它只是在DOM准备好之前不会显示您的工具提示)。

定制

您可以更改第二行上的var声明来定制它。

var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursor

风格

你现在可以使用下面的CSS样式你的工具提示:

#tooltip {
    background: #fff;
    border: 1px solid red;
    padding: 3px 10px;
}

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

a[title="My site"] {
    color: red;
}

这也适用于你想添加的任何属性，例如:

HTML

<div class="my_class" anything="whatever">My Stuff</div>

CSS

.my_class[anything="whatever"] {
    color: red;
}

查看它的工作:http://jsfiddle.net/vpYWE/1/

看起来实际上有一个纯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