Tooltip

Displays floating content containing additional information about an action on hover or focus.

	<script lang="ts">
  import * as Button from "@/components//ui/button";
  import * as Tooltip from "@/components//ui/tooltip";
</script>
 
<Tooltip.Root>
  <Tooltip.Trigger asChild let:builder>
    <Button.Root builders={[builder]} variant="outline"
      >Hover</Button.Root
    >
  </Tooltip.Trigger>
  <Tooltip.Content>
    <p>Add to library</p>
  </Tooltip.Content>
</Tooltip.Root>

	<script lang="ts">
  import * as Button from "@/components//ui/button";
  import * as Tooltip from "@/components//ui/tooltip";
</script>
 
<Tooltip.Root>
  <Tooltip.Trigger asChild let:builder>
    <Button.Root builders={[builder]} variant="outline"
      >Hover</Button.Root
    >
  </Tooltip.Trigger>
  <Tooltip.Content>
    <p>Add to library</p>
  </Tooltip.Content>
</Tooltip.Root>

Structure

	<script lang="ts">
  import { Tooltip } from 'bits-ui';
</script>
 
<ToolTip.Root>
  <Tooltip.Trigger />
  <Tooltip.Content>
    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip.Root>

	<script lang="ts">
  import { Tooltip } from 'bits-ui';
</script>
 
<ToolTip.Root>
  <Tooltip.Trigger />
  <Tooltip.Content>
    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip.Root>

🚧 UNDER CONSTRUCTION 🚧