HTML 标题属性样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38228962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML title attribute style
提问by user6556957
How do I change the styling of the title attribute in the following tag without using javascript or CSS, since I am inserting the HTML into a specific spot in an otherwise uneditable doc.
如何在不使用 javascript 或 CSS 的情况下更改以下标签中 title 属性的样式，因为我将 HTML 插入到其他无法编辑的文档中的特定位置。
<span title = "This is information"> This is a test
</span>
回答by BritishSam
https://jsfiddle.net/LvjaxLfn/153/
https://jsfiddle.net/LvjaxLfn/153/
<span aria-label="This is information">This is a test</span>
span:hover {
position: relative;
}
span[aria-label]:hover:after {
content: attr(aria-label);
padding: 4px 8px;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
background:red;
}
Using an aria label to keep accessibility
使用 aria 标签保持可访问性
You could also add a transition delay to make it show up after a delay like a native html title
您还可以添加过渡延迟，使其像原生 html 标题一样在延迟后显示
https://jsfiddle.net/f9zna6k2/10/
https://jsfiddle.net/f9zna6k2/10/
span {
position: relative;
cursor: pointer;
}
span[aria-label]:after {
opacity:0;
content: attr(aria-label);
padding: 4px 8px;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
background:red;
transition: opacity 0.5s;
pointer-events:none;
}
span[aria-label]:hover:after {
opacity:1;
transition-delay:1.5s;
}
