如何更改锚标记内的Title属性的样式？
例：
<a href="example.com" title="My site"> Link </a> 如何更改“标题”属性。 默认情况下，它只有黄色背景和小字体。 我想把它做大，改变背景颜色。
标题属性是否有CSS设置？
使用CSS3，现在可以使用content属性很容易地设置title属性的样式。 这里是一个简短的演示：
CSS
a { color: #900; text-decoration: none; } a:hover { color: red; position: relative; } a[title]:hover:after { content: attr(title); padding: 4px 8px; color: #333; position: absolute; left: 0; top: 100%; z-index: 20; white-space: nowrap; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 4px #222; -webkit-box-shadow: 0px 0px 4px #222; box-shadow: 0px 0px 4px #222; background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc); }
这里是一个如何做到这一点的例子：
a.tip { border-bottom: 1px dashed; text-decoration: none } a.tip:hover { cursor: help; position: relative } a.tip span { display: none } a.tip:hover span { border: #c0c0c0 1px dotted; padding: 5px 20px 5px 5px; display: block; z-index: 100; background: url(..http://img.dovov.comstatus-info.png) #f0f0f0 no-repeat 100% 5%; left: 0px; margin: 10px; width: 250px; position: absolute; top: 10px; text-decoration: none }
<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>
CSS不能改变工具提示外观。 这是浏览器/操作系统相关的。 如果你想要不同的东西，你将不得不使用Javascript生成标记，而不是默认的工具提示。
我以为我会在这里发布我的20行JavaScript解决scheme。 这不是完美的，但可能对一些有用，取决于你的工具提示你需要什么。
何时使用它
- 使用定义的
TITLE属性自动设置所有HTML元素的工具提示（这包括将来dynamic添加到文档中的元素） - 没有每个工具提示所需的Javascript / HTML更改或黑客（只是
TITLE属性，语义清晰） - 很轻（增加约300字节gzipped和缩小）
- 你只需要一个非常基本的风格的工具提示
何时不使用
- 需要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; }
我会推荐一个JavaScript工具提示。 我经常使用Zorn的工具提示，并喜欢它的灵活性： http : //www.walterzorn.de/en/tooltip/tooltip_e.htm
还有一些jQuery选项，如果你更舒服： http : //www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
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/
