Html 如何更改锚定标记中标题属性的样式？

例如：

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

如何更改浏览器中“标题”属性的显示方式？。默认情况下，它只有黄色背景和小字体。我想把它放大，改变背景色

---

是否有CSS方法设置标题属性的样式？

CSS无法更改工具提示的外观。它依赖于浏览器/操作系统。如果您想要一些不同的东西，当您将鼠标悬停在元素上时，您必须使用Javascript来生成标记，而不是默认的工具提示。

下面是一个如何执行此操作的示例：

a.tip{
边框底部：1px虚线；
文本装饰：无
}
a、 提示：悬停{
光标：帮助；
职位：相对
}
a、 叶尖跨度{
显示：无
}
a、 提示：悬停跨度{
边框：#C0C0 1px虚线；
填充：5px20px 5px 5px；
显示：块；
z指数：100；
背景：url（../images/status info.png）#f0不重复100%5%；
左：0px；
利润率：10px；
宽度：250px；
位置：绝对位置；
顶部：10px；
文本装饰：无
}

---

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

---

也就是说，您可以使用一些库，在元素悬停时显示浮动层的样式（而不是本机工具提示，并抑制它们），只需要很少或不需要修改代码…

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

a[title="My site"] {
    color: red;
}

这也适用于要添加的任何属性，例如：

HTML

---

请参阅：

我想在这里发布我的20行JavaScript解决方案。它并不完美，但可能对某些人有用，具体取决于您从工具提示中需要什么

何时使用它

• 为所有定义了

  TITLE

  属性的HTML元素自动设置工具提示样式（这包括将来动态添加到文档中的元素）
• 每个工具提示都不需要Javascript/HTML更改或破解（只需

  TITLE

  属性，语义清晰）
• 非常轻（压缩和缩小后增加约300字节）
• 您只需要一个非常基本的可设置样式的工具提示

何时不使用

// 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); }
}());

• 需要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); }
}());

风格

// 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); }
}());

现在可以使用以下CSS设置工具提示的样式：

#tooltip {
    background: #fff;
    border: 1px solid red;
    padding: 3px 10px;
}

---

自定义工具提示模式的JSFIDLE是

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

检查伪类的跨浏览器支持

    <!-- 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;
}

开发商。

/*CSS*/
a、 工具提示{
位置：相对位置；
}
a、 工具提示范围{
显示：无；
}
a、 工具提示：悬停范围，a。工具提示：焦点范围{
显示：块；
位置：绝对位置；
顶部：1米；
左：1.5em；
填充：0.2em 0.6em；
边框：1px实心#996633；
背景色：#FFFF66；
颜色：#000；
}

事实上似乎有一个纯CSS解决方案，只需要CSS

attr

表达式、生成的内容和属性选择器（这表明它早在IE8就可以工作）：

a{
位置：相对位置；
显示：内联块；
边缘顶部：20px；
}
a[标题]：悬停：：之后{
内容：attr（title）；
位置：绝对位置；
前-100%；
左：0；
}

---

我在这里找到了答案：

我自己的代码是这样的，我已经更改了属性名，如果您维护属性的标题名，那么最终会有两个相同文本的弹出窗口，另一个更改是，我悬停时的文本显示在暴露文本的下面

.tags{
显示：内联；
位置：相对位置；
}
.tags:悬停：在{
背景：#333；
背景：rgba（0,0,0,8）；
边界半径：5px；
底部：-34px；
颜色：#fff；
内容：attr（光泽）；
左：20%；
填充：5px15px；
位置：绝对位置；
z指数：98；
宽度：350px；
}
.tags:悬停：在{
边框：实心；
边框颜色：#333透明；
边框宽度：0 6px 6px 6px；
底部：-4px；
内容：“；
左：50%；
位置：绝对位置；
z指数：99；
}

公开文本

您不能设置实际的

标题

属性的样式

title

属性中文本的显示方式由浏览器定义，并因浏览器而异。网页不可能对浏览器基于

title

属性显示的工具提示应用任何样式

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

您可以使用CSS和自定义属性（例如，

数据标题

）制作伪工具提示 为此，我将使用

数据标题

属性。是一种在DOM元素/HTML中存储自定义数据的方法。有。重要的是，它们可以由CSS选择

假设您可以使用CSS选择具有

数据标题

属性的元素，那么您可以使用CSS创建（或）包含属性值的元素

样式化工具提示示例 更大，背景颜色不同（根据问题要求）：

[数据标题]：悬停：之后{
不透明度：1；
过渡：所有的0.1轻松0.5秒；
能见度：可见；
}
[数据标题]：之后{
内容：attr（数据标题）；
背景色：#00FF00；
颜色：#111；
字体大小：150%；
位置：绝对位置；
填充物：1px 5px 2px 5px；
底部：-1.6em；
左：100%；
空白：nowrap；
盒影：1px 1px 3px#22222；
不透明度：0；
边框：1px实心#111111；
z指数：99999；
可见性：隐藏；
}
[资料标题]{
位置：相对位置；
}

带有样式化工具提示（更大，背景颜色不同，
    <!-- 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;
}