pages._explore-components-interaction-tooltip.title

pages._explore.sections.basic-usage.title

html

<Tooltip>
    <template #trigger>
        <BaseButton text="Hover me" />
    </template>
    <template #content>
        <Text text="This is a tooltip!" />
    </template>
</Tooltip>

typescript

<script setup lang="ts">
// The Tooltip component uses slots for trigger and content
// By default, it opens on hover
</script>

pages._explore.sections.complex-usage.title

html

<Tooltip
    :position="TooltipOpeningPositions.TOP"
    :content-offset="20"
    :open-on-hover="false"
>
    <template #trigger>
        <BaseButton text="Click me" />
    </template>
    <template #content>
        <Text text="This tooltip opens on click!" />
    </template>
</Tooltip>

typescript

<script setup lang="ts">
import { TooltipOpeningPositions } from '#core-types/components/interaction/tooltip'

// Custom positioning, offset, and click-to-open behavior
</script>

Tooltip Positions

html

<!-- Top position -->
<Tooltip :position="TooltipOpeningPositions.TOP">
    <template #trigger>
        <BaseButton text="Top" />
    </template>
    <template #content>
        <Text text="Tooltip on top" />
    </template>
</Tooltip>

<!-- Bottom position (default) -->
<Tooltip :position="TooltipOpeningPositions.BOTTOM">
    <template #trigger>
        <BaseButton text="Bottom" />
    </template>
    <template #content>
        <Text text="Tooltip on bottom" />
    </template>
</Tooltip>

<!-- Left position -->
<Tooltip :position="TooltipOpeningPositions.LEFT">
    <template #trigger>
        <BaseButton text="Left" />
    </template>
    <template #content>
        <Text text="Tooltip on left" />
    </template>
</Tooltip>

<!-- Right position -->
<Tooltip :position="TooltipOpeningPositions.RIGHT">
    <template #trigger>
        <BaseButton text="Right" />
    </template>
    <template #content>
        <Text text="Tooltip on right" />
    </template>
</Tooltip>

typescript

<script setup lang="ts">
import { TooltipOpeningPositions } from '#core-types/components/interaction/tooltip'
</script>

Behavior Options

html

<!-- Hover behavior (default) -->
<Tooltip :open-on-hover="true">
    <template #trigger>
        <BaseButton text="Hover tooltip" />
    </template>
    <template #content>
        <Text text="Opens on hover" />
    </template>
</Tooltip>

<!-- Click behavior -->
<Tooltip :open-on-hover="false">
    <template #trigger>
        <BaseButton text="Click tooltip" />
    </template>
    <template #content>
        <Text text="Opens on click" />
    </template>
</Tooltip>

typescript

<script setup lang="ts">
// Hover behavior shows tooltip on mouseover/mouseleave
// Click behavior shows tooltip on click and closes on outside click or Escape key
</script>

pages._explore.sections.props.title

Prop	Default	Type
position	TooltipOpeningPositions.BOTTOM	TooltipOpeningPositions
contentOffset	14	number
openOnHover	true	boolean

pages._explore.sections.types.title

Name	Type	Options
TooltipOpeningPositions	enum	TOP \| BOTTOM \| LEFT \| RIGHT

pages._explore.sections.slots.title

Slot	Type
trigger	Element that triggers the tooltip
content	Content displayed in the tooltip