JSFiddle - React, Tailwind, and code Playground

by Leviev

HTML

<h1>Всплывающая подсказка</h1>
<p>Чтобы посмотреть как работает эта CSS3 всплывающая подсказка, наведите курсор
<a href="#" class="tooltip black-tooltip"
    data-title="Это первая CSS подсказка.">сюда</a>,<br> а чтобы полчить другую подсказку,
<a href="#" class="tooltip black-tooltip"
    data-title="Это ВтораЯ подсказка, созданная исключительно с помощью CSS3.">наведите курсор сюда</a>.
</p>

CSS

.tooltip {
    position: relative;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    color: #222;
    outline: none;
    text-indent: 0;
    padding: 0 3px;
}
.tooltip:hover:before {
    content: attr(data-title);
    white-space: pre-line;
    position: absolute;
    bottom: 23px;
    z-index: 9999;
    width:230px;
    margin-left:-100%;
    padding: 5px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.tooltip:hover:after {
    content: "";
    position: absolute;
    z-index: 10000;
    bottom: 17px;
    left: 50%;
    margin-left: -8px;
    border-top: 8px solid #ddd;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 0;
}
.black-tooltip:hover:before {
    color:#fff;
    border-color: #676767;
    background-color: #363636;
}
.black-tooltip:hover:after {
    color:#fff;
    border-top-color: #363636;
}