Tooltip

<div class="flex flex-wrap justify-center gap-2 py-6">
    <Tooltip><TooltipTrigger><Button Variant="@Button.ButtonVariant.Outline">Top</Button></TooltipTrigger><TooltipContent Side="top"><p>Add to library</p></TooltipContent></Tooltip>
    <Tooltip><TooltipTrigger><Button Variant="@Button.ButtonVariant.Outline">Right</Button></TooltipTrigger><TooltipContent Side="right"><p>Add to library</p></TooltipContent></Tooltip>
    <Tooltip><TooltipTrigger><Button Variant="@Button.ButtonVariant.Outline">Bottom</Button></TooltipTrigger><TooltipContent Side="bottom"><p>Add to library</p></TooltipContent></Tooltip>
    <Tooltip><TooltipTrigger><Button Variant="@Button.ButtonVariant.Outline">Left</Button></TooltipTrigger><TooltipContent Side="left"><p>Add to library</p></TooltipContent></Tooltip>
</div>

<div class="flex flex-col items-center py-6">
    <Tooltip>
        <TooltipTrigger>
            <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.IconSm" aria-label="Save changes">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" /><polyline points="17 21 17 13 7 13 7 21" /><polyline points="7 3 7 8 15 8" /></svg>
            </Button>
        </TooltipTrigger>
        <TooltipContent Class="pr-1.5">
            <div class="flex items-center gap-2">
                Save Changes <Kbd>S</Kbd>
            </div>
        </TooltipContent>
    </Tooltip>
</div>

<div class="flex flex-col items-center py-6">
    <Tooltip>
        <TooltipTrigger>
            <span class="inline-block w-fit">
                <Button Variant="@Button.ButtonVariant.Outline" Disabled="true">Disabled</Button>
            </span>
        </TooltipTrigger>
        <TooltipContent>
            <p>This feature is currently unavailable</p>
        </TooltipContent>
    </Tooltip>
</div>