如何使用 CSS 样式和 data-title 属性显示 HTML <input> 元素的工具提示文本？

Question

我正在尝试使用 HTML 控件的 data-title 属性来显示类似文本的工具提示。

我对元素使用了以下技术，效果很好。

HTML 元素：

<span class="spanNewID" data-title="Tooltip Text">816631-20319G14440 </span>

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

上面的代码 sn-p 可以正确显示我的基于 css 的工具提示。

我正在尝试将相同的选择器应用于一个元素。 考虑以下几点：

HTML 元素：

<input type="submit" value="Click Me" class="inuse" data-title="Input ELement Help"> </input>

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

在这种情况下，悬停文本/工具提示不会显示。 我没有看到任何错误。页面上没有可见的变化。 我尝试在 Chrome "CSS Selector Tester" 中使用 css 选择器，并且选择器按预期工作。

我在这里遗漏了什么/做错了什么？

谢谢，约翰B

Answer 1

我自己在谷歌上搜索了一下，得到了一些有趣的信息。首先，pseduo-selectors :before and :after should be used on container elements。

您可能会使用<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>

或者，我相信您已经考虑过这一点，但还是值得一提，只需使用 title 属性：

<input type="submit" value="Click Me" class="inuse" data-title="Input ELement Help" title="Input ELement Help">