[英]How do I display tooltip text for HTML <input> element using CSS style and data-title attribute?
I am attempting to display tooltip like text using the data-title attribute for an HTML control.我正在尝试使用 HTML 控件的 data-title 属性显示类似文本的工具提示。
I used the following technique for a element, and it works fine.我对元素使用了以下技术,并且效果很好。
HTML Element: HTML 元素:
<span class="spanNewID" data-title="Tooltip Text">816631-20319G14440 </span>
CSS Style: CSS样式:
span.spanNewID[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
span.spanNewID[data-title]:after {
content: attr(data-title);
background-color: lightblue;
color: #111;
font-size: 12pt;
font-weight: bold;
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;
}
span.spanNewID[data-title] {
position: relative;
}
The above code snippet works to correctly display my css based tooltip.上面的代码片段可以正确显示我的基于 css 的工具提示。
I am trying to apply the same selector to an element.我正在尝试将相同的选择器应用于元素。 Consider the following:
考虑以下:
HTML Element: HTML 元素:
<input type="submit" value="Click Me" class="inuse" data-title="Input ELement Help"> </input>
CSS Style: CSS样式:
input.inuse[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
input.inuse[data-title]:after {
content: attr(data-title);
background-color: lightblue;
color: #111;
font-size: 12pt;
font-weight: bold;
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;
}
input.inuse[data-title] {
position: relative;
}
The hover text/tooltip does not display in this case.在这种情况下不显示悬停文本/工具提示。 I do not see any errors.
我没有看到任何错误。 There are no visible changes on the page.
页面上没有可见的更改。 I attempted to use the css selector in the Chrome " CSS Selector Tester " and the selector works as expected.
我尝试在Chrome “ CSS 选择器测试器”中使用 css 选择器,并且选择器按预期工作。
What am I missing/doing wrong here?我在这里错过了什么/做错了什么?
Thanks,JohnB谢谢,约翰B
I did a bit of Googling myself, and came up with some interesting information.我自己做了一些谷歌搜索,并想出了一些有趣的信息。 First off, pseduo-selectors :before and :after should be used on container elements .
首先,伪选择器 :before 和 :after 应该用于容器元素。
Potentially you could use <button></button>
instead of <input>
and achieve the effect you desire:可能你可以使用
<button></button>
而不是<input>
并达到你想要的效果:
.inuse[data-title]:hover:after { opacity: 1; transition: all 0.1s ease 0.5s; visibility: visible; } .inuse[data-title]:after { content: attr(data-title); background-color: lightblue; color: #111; font-size: 12pt; font-weight: bold; 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; } .inuse[data-title] { position: relative; }
<button type="submit" value="Click Me" class="inuse" data-title="Input ELement Help">Click Me</button>
Or, and I'm sure you've considered this but it's worth mentioning anyway, just use the title
attribute:或者,我确定您已经考虑过这一点,但无论如何都值得一提,只需使用
title
属性:
<input type="submit" value="Click Me" class="inuse" data-title="Input ELement Help" title="Input ELement Help">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.