如何更改锚标记内的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); } 

演示http://jsfiddle.net/tDQWN/

这里是一个如何做到这一点的例子:

 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/