I am attempting to display tooltip like text using the data-title attribute for an HTML control.
I used the following technique for a element, and it works fine.
HTML Element:
<span class="spanNewID" data-title="Tooltip Text">816631-20319G14440 </span>
CSS Style:
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.
I am trying to apply the same selector to an element. Consider the following:
HTML Element:
<input type="submit" value="Click Me" class="inuse" data-title="Input ELement Help"> </input>
CSS Style:
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.
What am I missing/doing wrong here?
Thanks,JohnB
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.
Potentially you could use <button></button> instead of <input> and achieve the effect you desire:
.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:
<input type="submit" value="Click Me" class="inuse" data-title="Input ELement Help" title="Input ELement Help">Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments