如何改变锚点标签内标题属性的样式？

Question

如何改变锚点标签内标题属性的样式？

344

示例：

<a href="example.com" title="My site"> Link </a>

如何更改浏览器中"title"属性的呈现方式？默认情况下，它只有黄色背景和小字体。我想让它变大并更改背景颜色。

有没有一种CSS的方法来设置"title"属性的样式？

- Kunpha

我写了一个小脚本来实现这个功能，叫做title-tooltips。 - vsync

11个回答

199

您无法为实际的`title`属性设置样式

title属性中的文本如何显示是由浏览器定义的，并且各个浏览器之间略有差异。网页不能对基于title属性的工具提示应用任何样式。

但是，您可以使用其他属性创建非常相似的内容。

您可以使用CSS和自定义属性（例如`data-title`）制作伪工具提示

对此，我将使用data-title属性。data-*属性是一种在DOM元素/HTML中存储自定义数据的方法。有多种访问方式。重要的是，它们可以被CSS选择。

由于您可以使用CSS选择具有data-title属性的元素，因此您可以使用CSS创建包含该属性值的:after（或:before）content，使用attr()函数来引用属性的值。

样式化工具提示示例

更大且具有不同的背景颜色（根据问题的要求）：

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

更加详细的样式（改编自这篇博客文章）：

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -1.6em;
    left: 100%;
    padding: 4px 4px 4px 8px;
    color: #222;
    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, #f8f8f8, #cccccc);  
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

已知问题

与实际的 title 工具提示不同，上述 CSS 生成的工具提示不一定保证在页面上可见（即可能在可见区域之外）。另一方面，它保证位于当前窗口内，而实际工具提示则不是这种情况。

此外，伪工具提示的位置相对于具有伪工具提示的元素而非鼠标在该元素上的位置。您可能希望微调伪工具提示的显示位置。它以相对于元素的已知位置出现可以是优点或缺点，具体取决于情况。

不能在非容器元素上使用 `:before` 或 `:after`

在“Can I use a :before or :after pseudo-element on an input field?”中有一个很好的解释。

实际上，这意味着您无法直接在像 <input type="text"/>、<textarea/>、<img> 等元素上使用此方法。简单的解决方案是将非容器元素包装在 <span> 或 <div> 中，并将伪工具提示放在容器上。

使用伪工具提示的示例，在包装非容器元素的 <span> 上：

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: inline-block;
}

Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type=&quot;text&quot;"><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>

^{从上面链接的博客文章的代码（我首先在一个剽窃了这个代码的答案中看到它），对我来说很明显应该使用data-*属性而不是title属性。在那个（现已删除的）答案上，也有snostorm的评论建议这样做。}

- Makyen

2

这可能不是问题的答案，但这是目前为止最好的解决方案。谢谢。 - JJ Labajo

3

感谢 @JJLabajo 对这个方案的称赞。然而，我不确定它为什么不能回答问题。问题在问一个不可能的东西。这个答案表明这是不可能的，但提供了一种类似于OP所需求的东西的替代方案。 - Makyen

4

这个回答实际上告诉了我们正在发生什么，并提供了各种结构良好的背景信息。 - Ideogram

@AVINASHM，如果您执行某些操作导致浏览器定义的工具提示出现，除了不执行导致该工具提示出现的操作之外，您无法阻止其发生。在使用required=true的特定情况下，您需要不使用该属性并为表单实现自己的验证。或者，您可以使伪工具提示出现在默认工具提示不占用的位置。这可能是特定于浏览器的，但您可以实现覆盖您要支持的浏览器的CSS。 - Makyen

1

@Arsen，我不确定你为什么会有问题。显然，您需要调整CSS，使工具提示在您使用它的上下文中看起来很好。这里使用的内容仅旨在证明概念并实现问题中请求的特定格式。如果您想要文字换行，只需删除 white-space: nowrap; 并应用其他CSS属性（例如 width、height、max-width、max-height 等）即可。实际使用的CSS并不是为所有情况而设计的，而只是演示完成所请求任务的一种方法。 - Makyen

显示剩余17条评论

148

这是一个如何实现的示例：

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(../images/status-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>

- valli

1

如果使用标签td而不是标签a，在FF中无法正常工作。 - dnim

7

请参考 http://sixrevisions.com/css/css-only-tooltips/，该网页展示了上述技巧的实例，并提供了详细的解释。 - George

1

当我这样做时，我看到了一个双重工具提示。首先是有样式的，然后不久之后，无样式的弹出在上面。这是在你的fiddle上发生的。我正在使用chrome浏览器。这是异常情况吗？ - user1816910

17

这里有一个没有title属性代码的答案得到了100多个赞...？ - Ben Racicot

3

没有回答实际问题...哎呀！ - Matt

显示剩余2条评论

31

CSS无法改变工具提示的外观。它取决于浏览器/操作系统。如果您想要不同的外观，您需要使用Javascript，在悬停在元素上时生成标记，而不是使用默认的工具提示。

- cletus

27

不一定要使用JS来实现这个。 - ANeves

21

“你不能”的回答的风险是它们可能过时。（另一个风险是你可能不知道如何做。） - Michael Scheper

27

我在这里找到了答案：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>

- Andrés Chandía

1

翻译：gloss不符合HTML规范，而data-gloss则符合。 - djibe

更新了...谢谢 - undefined

12

我想在这里张贴我20行JavaScript解决方案。它并不完美，但取决于你需要从工具提示中获得什么，对一些人可能会有用。

何时使用

自动为所有定义了TITLE属性的HTML元素样式化工具提示（这包括未来动态添加到文档中的元素）
每个工具提示无需进行JavaScript/HTML更改或黑客（只需使用一个语义清晰的TITLE属性）
非常轻巧（经过gzip和minify后增加约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;
}

- ChrisF

2

非常好！如果标题为空，可以在此处找到修复小错误的脚本：http://stackoverflow.com/questions/26702472/bug-fix-for-a-script-that-applies-css-to-the-title-attribute - Malasorte

如果您快速移动到一个元素上，即使使用上述错误修复，我仍会得到一个空的工具提示。这是不稳定的，并且如果我取消$(this).removeAttr("title")，它就会停止。但当然，过一段时间后，我会得到标准的帮助显示。 - Allen Conquest

8

这是一个自定义提示模式的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;
}

- prasun

5

本地工具提示无法进行样式设置。

话虽如此，您可以使用一些库，当元素被悬停时显示样式浮动层（而不是本机工具提示，并抑制它们），需要很少或没有代码修改...

- poncha

1

我认为如果一个元素具有“title”属性，则无法抑制本地工具提示。因此，如果您设置自己的工具提示实现，最好使用其他属性（例如“data-tip”）而不是“title”。 - Jukka K. Korpela

1

如果您在附加到事件后清除标题属性，则可以这样做。 - poncha

1

我理解你的观点，但这不是关于设置本地工具提示的样式，而是通过修改DOM来避免它们。 - Jukka K. Korpela

@JukkaK.Korpela 是的，而且我在第一句话中就说了这是不可能的;) - poncha

使用title属性并稍后清除的好处在于，如果用户禁用了JavaScript，则仍然可以使用工具提示。 - JJJ

2

现在有一个本地解决方案，使用::tooltip作为伪元素。请参阅CSSWG讨论和决策。

希望很快能取得实施进展。

- Alohci

2

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

- bfavaretto

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon z · Accepted Answer

看起来实际上有一个纯CSS解决方案，只需要使用css中的attr表达式、生成内容和属性选择器（这表明它可以在IE8之前的浏览器中使用）：

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

a {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

a[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
}

<a href="http://www.google.com/" title="Hello world!">
  Hover over me
</a>

更新: 根据@ViROscar的建议，不需要使用任何特定属性，尽管在上面的示例中我使用了"title"属性;实际上，我的建议是使用"alt"属性，因为有一些用户无法受益于CSS，所以这个内容可能会对他们有帮助。 再次更新: 我没有改变代码，因为"title"属性基本上已经成为"工具提示"属性的意思，而在一个只能通过悬停访问的字段中隐藏重要文本可能不是一个好主意，但如果你想使这个文本可访问，"aria-label"属性似乎是最好的选择: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

如何改变锚点标签内标题属性的样式？

您无法为实际的title属性设置样式

您可以使用CSS和自定义属性（例如data-title）制作伪工具提示

样式化工具提示示例

已知问题

不能在非容器元素上使用 :before 或 :after

您无法为实际的`title`属性设置样式

您可以使用CSS和自定义属性（例如`data-title`）制作伪工具提示

不能在非容器元素上使用 `:before` 或 `:after`