从“title =”“工具提示文本”对原生工具提示进行样式设置 [英] Styling native tooltip from title="Tooltip text"

问题描述

由于某种原因，这个工具提示需要加上样式，因为这个元素的标题属性，当然会带有属性值消息的tooltip。 css。

如何做？我不知道在哪个容器将被渲染，我不知道它。此外，它不能被开发工具firebug访问

解决方案

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

  a [title]：hover：after {
 content：attr（title）; 
 position：absolute; 
} 
  

资料来源：http://jsfiddle.net/tDQWN/

更新 w / input from @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

I have input element that has title attribute which of course will result with tooltip with message of the attribute value.

For some reason this tooltip needs to be styled with css.

How can it be done? I do not know in which container it will be rendered, I do not know nothing about it. Also it cannot be accessed by developer tools of firebug

解决方案

It seems that there is in fact a pure CSS solution, requiring only the css attr expression, generated content and attribute selectors (which suggests that it works as far back as IE8):

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

Source: http://jsfiddle.net/tDQWN/

update w/ input from @ViROscar: please note that it's not necessary to use any specific attribute, although I've used the "title" attribute in the example above; actually my recommendation would be to use the "alt" attribute, as there is some chance that the content will be accessible to users unable to benefit from CSS.

update again I'm not changing the code because the "title" attribute has basically come to mean the "tooltip" attribute, and it's probably not a good idea to hide important text inside a field only accessible on hover, but if you're interested in making this text accessible the "aria-label" attribute seems like the best place for it: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

这篇关于从“title =”“工具提示文本”对原生工具提示进行样式设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！