Tooltips

Overview

Tooltip allows you to give a piece of information, mostly, in the shortest way.

This component has many props enabling you to customize the content you want to show. Here are many examples you can achieve.

Tooltip as Text

A regular way to tooltip is just to pass to text props a string value as message.

I'm a tooltip but to left

Tooltip Left

I'm a tooltip by default to top

Hover me !

I'm a tooltip showing at bottom

Tooltip Bottom

I'm a tooltip and I'm at right

Tooltip Right

Copied !

import { Badge } from "$components/badge.component";
import { Tooltip } from "$components/tooltip.component";

export function WithTextTooltipExample() {
	return (
		<div class="grid grid-cols-2 items-center gap-4">
			<div>
				<Tooltip text="I'm a tooltip but to left" position="left">
					<Badge text="Tooltip Left" />
				</Tooltip>
			</div>
			<div>
				<Tooltip text="I'm a tooltip by default to top">
					<Badge text="Hover me !" />
				</Tooltip>
			</div>
			<div>
				<Tooltip text="I'm a tooltip showing at bottom" position="bottom">
					<Badge text="Tooltip Bottom" />
				</Tooltip>
			</div>
			<div>
				<Tooltip text="I'm a tooltip and I'm at right" position="right">
					<Badge text="Tooltip Right" />
				</Tooltip>
			</div>
		</div>
	);
}

Tooltip as Component

Even better, you can pass an astro component to tooltip with component props.

PS: text props has priority to component props.

I was made for TooltipWithComponentExample

Display Dummy Content !

Copied !

import { Badge } from "$components/badge.component";
import { Tooltip } from "$components/tooltip.component";

function TooltipDummyComponent() {
    return <p>I was made for TooltipWithComponentExample</p>;
}

export function WithComponentTooltipExample() {
    return (
			<Tooltip
				triggerOnHover={false}
				component={<TooltipDummyComponent />}
				position="bottom"
			>
				<Badge x-bind="toggle" text="Display Dummy Content !" />
			</Tooltip>
		);
}

Custom Tooltip Trigger

By default, tooltip message is triggered by hovering content. With triggerOnHover props, you can disable this mechanism and trigger tooltip in your own way.

Below is an example with a trigger on click. By the way, the copy button in code side is a tooltip triggering by click.

I'm a tooltip triggering by click

Copied !

import { SecondaryButton } from "$components/button.component";
import { Tooltip } from "$components/tooltip.component";

export function CustomTriggerTooltipExample() {
	return (
		<Tooltip
			text="I'm a tooltip triggering by click"
			size="md"
			triggerOnHover={false}
		>
			<SecondaryButton
				x-on:click="visible = !visible"
				text="Click Me to show Tooltip message"
				borderRadius="arc"
			/>
		</Tooltip>
	);
}