forked from
pds.ls/pdsls
atmosphere explorer
1import { JSX, Show } from "solid-js";
2import { canHover } from "../layout";
3
4const Tooltip = (props: { text: string; children: JSX.Element }) => (
5 <span class="group/tooltip relative inline-flex items-center">
6 {props.children}
7 <Show when={canHover}>
8 <span
9 style={`transform: translate(-50%, 28px)`}
10 class={`dark:shadow-dark-700 dark:bg-dark-300 pointer-events-none absolute left-[50%] z-20 hidden min-w-fit rounded border-[0.5px] border-neutral-300 bg-white p-1 text-center font-sans text-xs font-normal whitespace-nowrap text-neutral-900 shadow-md select-none group-hover/tooltip:inline first-letter:capitalize dark:border-neutral-600 dark:text-neutral-200`}
11 >
12 {props.text}
13 </span>
14 </Show>
15 </span>
16);
17
18export default Tooltip;