oppi.li
forked from
pds.ls/pdsls
this repo has no description
juliet.paris
1import { JSX, Show } from "solid-js";
2
3const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
4
5const Tooltip = (props: { text: string; children: JSX.Element }) => {
6 const width = (props.text.length - 1).toString();
7 return (
8 <div class="group/tooltip relative flex items-center">
9 {props.children}
10 <Show when={!isTouchDevice}>
11 <span
12 style={`transform: translate(-50%, 28px); min-width: ${width}ch`}
13 class={`left-50% border-0.5 dark:shadow-dark-900 pointer-events-none absolute z-10 hidden select-none whitespace-nowrap rounded border-neutral-300 bg-white p-1 text-center font-sans text-xs text-slate-900 shadow-md group-hover/tooltip:inline dark:border-neutral-600 dark:bg-neutral-800 dark:text-slate-100`}
14 >
15 {props.text}
16 </span>
17 </Show>
18 </div>
19 );
20};
21
22export default Tooltip;