Flux

Appearance

Tooltip ​

The tooltip component can be used to display additional information when the user hovers an element. It tries to position the tooltip within the viewport. When the content needs to be complex, a slot can be used.

Props

direction?: "horizontal" | "vertical"
The direction of the tooltip.
Default: vertical

content?: string
The content of the tooltip.

Slots

default
The element the tooltip is attached to.

content
The content of the tooltip.

Examples ​

Basic

A basic tooltip.

<template>
    <FluxTooltip
        content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur beatae cupiditate deserunt eius, fugiat ipsam maiores perspiciatis praesentium quae quasi quisquam quos, reiciendis rem repellendus, temporibus ut vitae voluptates.">
        <FluxSecondaryButton
            icon-leading="copy"
            label="Hover me"/>
    </FluxTooltip>
</template>

<script
    setup
    lang="ts">
    import { FluxSecondaryButton, FluxTooltip } from '@flux-ui/components';
</script>

Content

A tooltip that uses the content slot.

<template>
    <FluxTooltip>
        <template #content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur beatae cupiditate deserunt eius, fugiat ipsam maiores perspiciatis praesentium quae quasi quisquam quos, reiciendis rem repellendus, temporibus ut vitae voluptates.
        </template>

        <FluxSecondaryButton
            icon-leading="copy"
            label="Hover me"/>
    </FluxTooltip>
</template>

<script
    setup
    lang="ts">
    import { FluxSecondaryButton, FluxTooltip } from '@flux-ui/components';
</script>