How Do I Display Tooltip Text For Html 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. I used the following technique for a element, and it works fine. HTML Element: &

Solution 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: 1px5px2px5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px1px3px#222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}

.inuse[data-title] {
    position: relative;
}

<buttontype="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:

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