CSS tooltip

by sapphiriq

HTML

<p>
    <span data-tooltip="Тултип же!">Элемент с тултипом</span>
</p>

SCSS

body {font-family: sans-serif;margin: 3em}

[data-tooltip] {
    position: relative;
 
    &:hover::before {
        content: attr(data-tooltip);
        color: #fff;
        position: absolute;
        display: block;
        top: -2em;
        left: 0;
        white-space: nowrap;
        background: rgba(0,0,0,0.5);
        padding: 0.2em 0.5em;
        border-radius: 2px;
    }
}