10 lines
538 B
Plaintext
10 lines
538 B
Plaintext
component Tooltip {
|
|
props {
|
|
text = "Helpful information"
|
|
position = "top"
|
|
}
|
|
view {
|
|
<span class="group relative inline-flex"><slot /><span role="tooltip" class="pointer-events-none absolute z-40 w-max max-w-xs rounded-lg bg-slate-950 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition duration-200 group-hover:opacity-100 group-focus-within:opacity-100 {position === 'bottom' ? 'left-1/2 top-full mt-2 -translate-x-1/2' : 'bottom-full left-1/2 mb-2 -translate-x-1/2'}">{text}</span></span>
|
|
}
|
|
}
|