Tooltip 2024

by Petr Haluza

HTML

a<br>b<br>c<br><button
       data-tooltip="Tooltip obsah">
          Identifikuju se jako tlačítko
    </button>

CSS

[data-tooltip] { --arrow-size: 5px; position: relative;  z-index: 10;}
[data-tooltip]:before,
[data-tooltip]:after { position: absolute; visibility: hidden; opacity: 0; left: 50%; bottom: calc(100% + var(--arrow-size)); pointer-events: none; transition: 0.2s; will-change: transform;}

[data-tooltip]:before {
  content: attr(data-tooltip);  padding: 10px 18px;  min-width: 50px;  max-width: 300px;  width: max-content;  width: -moz-max-content;  border-radius: 6px;  font-size: 14px;  background-color: rgba(59, 72, 80, 0.9);  background-image: linear-gradient(30deg,    rgba(59, 72, 80, 0.44),    rgba(59, 68, 75, 0.44),    rgba(60, 82, 88, 0.44));  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);  color: #fff;  text-align: center;  white-space: pre-wrap;  transform: translate(-50%,  calc(0px - var(--arrow-size))) scale(0.5);}

/* Tooltip arrow */
[data-tooltip]:after { content: '';  border-style: solid;  border-width: var(--arrow-size) var(--arrow-size) 0px var(--arrow-size);
  border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;  transition-duration: 0s;  transform-origin: top; transform: translateX(-50%) scaleY(0);}

[data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible;  opacity: 1;}
[data-tooltip]:hover:before { transition-delay: 0.3s; transform: translate(-50%, calc(0px - var(--arrow-size))) scale(1);}
[data-tooltip]:hover:after { transition-delay: 0.5s; transition-duration: 0.2s; transform: translateX(-50%) scaleY(1);}

[data-tooltip-location="left"]:before,
[data-tooltip-location="left"]:after { left: auto; right: calc(100% + var(--arrow-size)); bottom: 50%;}
[data-tooltip-location="left"]:before { transform: translate(calc(0px - var(--arrow-size)), 50%) scale(0.5);}
[data-tooltip-location="left"]:hover:before { transform: translate(calc(0px - var(--arrow-size)), 50%) scale(1);}
[data-tooltip-location="left"]:after { border-width: var(--arrow-size) 0px var(--arrow-size) var(--arrow-size); border-color: transparent...