What is wrong with the CSS style below

Question

[data-title] {
    position: relative;
    cursor: help;
}
[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    top: -30px;
    left: 0;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background-color: cadetblue;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
}
[data-title]:hover::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 8px;
    display: inline-block;
    border: 8px solid transparent;
    border-top: 8px solid cadetblue;
}

It works with most elements Example:

<p data-title="This is the tooltips">Test Tooltips</p>

But it doesn't work with < input > element:

<input type="text" data-title="Test input tooltips" />

`:before` and `:after` render inside a container and can not contain other elements. — Manjuboyz, Apr 19 '20 at 05:44
Already answered here https://stackoverflow.com/questions/19480010/adding-a-tooltip-to-an-input-box — Chintan Pandya, Apr 19 '20 at 05:55

score 3 · Answer 1 · answered Apr 19 '20 at 05:47

try like this

[data-title] {
    position: relative;
    cursor: help;
    margin-top:50px;
}
[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    top: -30px;
    left: 0;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background-color: cadetblue;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
}
[data-title]:hover::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 8px;
    display: inline-block;
    border: 8px solid transparent;
    border-top: 8px solid cadetblue;
}

<div data-title="Test input tooltips">
    <input type="text" />
</div>

What is wrong with the CSS style below

1 Answers1