How do I display tooltip text for HTML <input> element using CSS style and data-title attribute?

Question

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

Thanks for the thoughtful response. I did Google it, came up with the solution, attempted to get it to work and provided a workable example. Nice job. — JohnB
– JohnB, Commented Jul 22, 2019 at 23:00

Frish · Accepted Answer · 2019-07-23 00:27:08Z

1

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">

answered Jul 23, 2019 at 0:27

Frish

1,40111 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SScotti Over a year ago

Discussion of that here: stackoverflow.com/questions/2587669/…

JohnB Over a year ago

Frish: Thank you so much for getting back to me. Due to existin design, I have to use asp.net buttons in a gridview. We'll have to live with unformatted tooltip text for those. Thx JB

Frish Over a year ago

I know the feeling! Good luck with your project :)

Collectives™ on Stack Overflow

How do I display tooltip text for HTML <input> element using CSS style and data-title attribute?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related