title属性样式 原生dom_html-如何更改锚标记内title属性的样式？

我以为我会在这里发布我的20行JavaScript解决方案。 它不是完美的，但是对于某些工具可能有用，具体取决于您在工具提示中的需求。

什么时候使用

使用定义的var属性为所有HTML元素自动设置工具提示的样式(这包括将来动态添加到文档中的元素)

每个工具提示均无需更改Javascript / HTML或修改内容(仅var属性，语义清晰)

非常轻(压缩并缩小了大约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);

$("

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;

}