<div class="tooltip-container">

<span class="tooltip">

<svg

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

width="80"

zoomAndPan="magnify"

viewBox="0 0 60 44.999999"

height="60"

preserveAspectRatio="xMidYMid meet"

version="1.0"

>

<defs>

<clipPath id="e2947948d6">

<path

d="M 2.25 6.75 L 57.75 6.75 C 58.992188 6.75 60 7.757812 60 9 L 60 42.75 C 60 43.992188 58.992188 45 57.75 45 L 2.25 45 C 1.007812 45 0 43.992188 0 42.75 L 0 9 C 0 7.757812 1.007812 6.75 2.25 6.75 Z M 2.25 6.75"

clip-rule="nonzero"

></path>

</clipPath>

</defs>

<g clip-path="url(#e2947948d6)">

<path

fill="#ff914d"

d="M 0 6.75 L 60.0625 6.75 L 60.0625 45 L 0 45 Z M 0 6.75"

fill-opacity="1"

fill-rule="nonzero"

></path>

<text x="15" y="30" fill="white" style="font-size:12px">hello</text>

</g>

<path

fill="#ff914d"

d="M 38.988281 12.292969 C 38.988281 11.898438 38.820312 11.449219 38.496094 10.988281 L 31.664062 0.996094 C 31.226562 0.351562 30.625 0 29.992188 0 C 29.363281 0 28.757812 0.351562 28.324219 0.996094 L 21.488281 10.972656 C 21.167969 11.4375 21.011719 11.898438 21.011719 12.292969 C 21.011719 13.035156 21.613281 13.5 22.613281 13.5 L 37.386719 13.5 C 38.386719 13.5 38.988281 13.035156 38.988281 12.292969 Z M 38.988281 12.292969"

fill-opacity="1"

fill-rule="nonzero"

></path>

</svg>

</span>

<span class="text">Tooltip</span>

/* From Uiverse.io by Pipo-13 - Tags: simple, tooltip, svg */

.tooltip-container {

--background: #d87639;

position: relative;

background: var(--background);

cursor: pointer;

transition: all 0.2s;

font-size: 17px;

padding: 0.7em 1.8em;

border-radius: 0.2rem;

}

.tooltip {

position: absolute;

top: 90%;

left: 50%;

transform: translateX(-50%) rotateX(90deg);

padding: 0.6em;

opacity: 0.6;

transition: all 0.5s ease;

background: transparent;

height: 0px;

cursor: default;

}

.tooltip-container:hover .tooltip {

opacity: 1;

pointer-events: auto;

background: none;

transform: translateX(-50%) rotateX(0deg);

}