如何更改锚标记内title属性的样式？

Answers:

133

这是一个如何做的例子：

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>
展开摘要

— 瓦利
source
不正确的FF如果不是标签工作一个使用标签，例如，TD
— dnim
6
有关上述技术的示例，请参见sixrevisions.com/css/css-only-tooltips，并有详细说明。
— 乔治
1
当我这样做时，我看到一个双重工具提示。有样式的样式，然后不久之后，未样式样式的样式弹出该样式样式。这在你的小提琴上。我正在使用Chrome。这是异常吗？
8
代码中没有标题属性的答案在这里有100多个投票...？
— 本·拉西科特
1
甚至没有解决实际问题...嘘！
— 马特
126

似乎实际上有一个纯CSS解决方案，仅需要css attr表达式，生成的内容和属性选择器（这表明它可以回溯到IE8）：

a[title]:hover:after {
  content: attr(title);
  position: absolute;
}

资料来源：https : //jsfiddle.net/z42r2vv0/2/

使用来自@ViROscar的输入更新：请注意，尽管我在上面的示例中使用了“ title”属性，但是没有必要使用任何特定属性；实际上，我的建议是使用“ alt”属性，因为很有可能无法从CSS中受益的用户可以访问该内容。

再次更新，我不会更改代码，因为“ title”属性基本上是指“ tooltip”属性，将重要的文本隐藏在仅悬停时才可访问的字段中可能不是一个好主意，有兴趣使此文本可访问的“ aria-label”属性似乎是最适合此属性的地方：https : //developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

— 琼斯
source
11
如果你没有为本地提示希望最终显示为好，你可以随时使用“ALT”标签..
— 乔恩ž
1
@Jonz我尝试使用自定义属性“ data-alt ='alt'”，一切正常。不需要使用alt或title属性。
— ViROscar 2015年
7
纯CSS工具提示具有严重的缺点-它们与元素绑定，因此与绑定stacking context。position除了static创建新的堆叠上下文和纯CSS工具提示之外的所有其他元素在外部都不可见，也不能超出此类堆叠上下文，因此，如果您的位置带有紧元素relative，则CSS工具提示将不可见。唯一的解决方案是将工具提示附加到需要JavaScript的顶部堆栈上下文（例如<body>）。
— 瓦茨拉夫·诺沃特尼
不幸的是，它不会在点击时消失。
— user2705463 '16
71

您无法为实际 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

对于“我可以在输入字段上使用：before或：after伪元素吗？”的答案有一个很好的解释。

有效地，这意味着，你不能像元件直接使用这个方法<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/>
展开摘要

从上面链接的博客文章上的代码（我在此处的first窃中首次看到它的gi窃），对我来说显然可以使用data-*属性而不是title属性。snostorm在对该答案（现已删除）的评论中也建议这样做。

— 麦延
source
1
这可能不是问题的答案，但这是迄今为止最好的解决方案。谢谢。
— JJ Labajo
@JJLabajo感谢您提供的补充，因为这是迄今为止最好的解决方案。但是，我不确定这怎么不能解决问题。问题是要求一些不可能的事情。这个答案说这是不可能的，但是提供了一种替代方案，可以实现与OP期望的相似的功能。
— Makyen '18
我认为此解决方案不适用于input[type='text']或元素textarea，但我不知道为什么。谁能解释？
— Cheeso
@Cheeso您是正确的，:beforeand :after伪元素不适用于不是容器的元素。答案中有一个很好的解释：我可以在输入字段上使用：before或：after伪元素吗？要使用此方法，可能最简单的方法是将不是容器的元素包装在<span>或<div>放置data-title属性的容器中。您可能还需要提供它们display: inline-block;，因为这会使它们的尺寸与<input>or 相同<textarea>。我用一个例子更新了这个答案。
— Makyen
这个答案实际上告诉我们发生了什么，并提供了各种结构良好的背景信息。
— Ideogram
26

CSS不能更改工具提示的外观。它取决于浏览器/操作系统。如果您想要其他内容，则将鼠标悬停在元素上时，必须使用Javascript生成标记，而不是使用默认的工具提示。

— 克莱图斯
source
22
一个不具备使用JS来做到这一点。
— ANeves 2012年
9
“您做不到”答案的风险在于它们可能会过时。（另一个风险是您可能不知道如何。）
— Michael Scheper
12

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

什么时候使用

  • 使用TITLE定义的属性自动为所有HTML元素设置工具提示的样式（这包括将来动态添加到文档中的元素）
  • 每个工具提示都不需要Javascript / HTML更改或修改（只需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;
}
— 克里斯·弗
source
2
很棒！修正了一个小错误（如果标题是空的）可以在这里找到：stackoverflow.com/questions/26702472/...
— Malasorte
如果您快速移动到某个元素上，即使有上述错误修复，我也会得到一个空的工具提示。这很不稳定，如果我取下$（this）.removeAttr（“ title”），它将停止。但是，当然，一段时间后，我会得到标准帮助。
— 艾伦征服
10

我在这里找到了答案：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(glose);
  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" glose="Text shown on hovering">Exposed text</a>
展开摘要

— 安德烈斯·钱迪亚（AndrésChandía）
source
7

定制工具提示模式的jsfiddle 在这里

它基于CSS定位和pseduo类选择器

在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
source
5

无法设置本机工具提示的样式。

话虽这么说，您可以使用一些库来在元素悬停时显示样式浮动层（而不是本地工具提示，并抑制它们），而几乎不需要修改代码。

— 蓬查
source
我认为，如果元素具有title属性，则无法抑制本机工具提示。因此，如果您设置自己的工具提示实现，则最好使用其他一些属性（例如data-tip）代替title。
— Jukka K. Korpela 2012年
1
您可以，如果在附加到事件后您清除了标题属性
— 庞查，2012年
1
我明白您的意思，但这并不是设计本机工具提示的样式。关于避免它们（通过修改DOM）。
— Jukka K. Korpela 2012年
@ JukkaK.Korpela是的，我在第一句话中说这是不可能的;）
— 庞查2012年
使用title属性并在以后清除它的好处是，如果用户禁用了JavaScript，则工具提示仍然可用。
— JJJ
2

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

— bfavaretto
source
-1 
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/

— 莎娜
source
14
这将为具有指定标题的元素设置样式；而不是浏览器显示的工具提示标题
— Rowland Shaw
1
另外，anything它也不是有效的HTML属性。对于自定义属性，请使用data-属性。
— user4642212 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.