Last active
February 28, 2023 17:40
-
-
Save aligator28/80893dde0564838c9674bb092448e603 to your computer and use it in GitHub Desktop.
CSS Tooltip triangle (подсказка с треугольничком внизу на CSS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sure, here's an example of CSS code that can display a tooltip block without using any images: | |
.tooltip { | |
position: relative; | |
display: inline-block; | |
cursor: pointer; | |
} | |
.tooltip::before { | |
content: ""; | |
position: absolute; | |
z-index: 1; | |
top: -5px; | |
left: 50%; | |
transform: translateX(-50%); | |
border-width: 5px; | |
border-style: solid; | |
border-color: transparent transparent #000000 transparent; | |
} | |
.tooltip::after { | |
content: attr(data-tooltip); | |
position: absolute; | |
z-index: 1; | |
top: -30px; | |
left: 50%; | |
transform: translateX(-50%); | |
background-color: #000000; | |
color: #ffffff; | |
padding: 5px; | |
border-radius: 5px; | |
font-size: 12px; | |
white-space: nowrap; | |
opacity: 0; | |
transition: opacity 0.3s ease-in-out; | |
} | |
.tooltip:hover::after { | |
opacity: 1; | |
} | |
To use this code, add a block element with the tooltip class and set its data-tooltip attribute to the text you want | |
to display in the tooltip. For example: | |
<span class="tooltip" data-tooltip="This is a tooltip">Hover over me</span> | |
When you hover over the element with the tooltip class, the tooltip block will be displayed with the text from | |
the data-tooltip attribute. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment