Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element. They provide helpful context and instructions. 

<div style="display: flex; gap: 1rem; align-items: center; padding: 2rem;">
    <x-mbc::tooltip title="This is a tooltip">
        <x-mbc::button label="Hover Me" variant="outlined" />
    </x-mbc::tooltip>
</div>

Plain Tooltip link

Plain tooltips display simple text information when hovering over an element. Use the title prop to set the tooltip text. 

<div style="display: flex; gap: 2rem; align-items: center; padding: 2rem; flex-wrap: wrap;">
    <x-mbc::tooltip title="Add to favorites">
        <x-mbc::icon-button icon="favorite" />
    </x-mbc::tooltip>

    <x-mbc::tooltip title="Share this item">
        <x-mbc::icon-button icon="share" />
    </x-mbc::tooltip>

    <x-mbc::tooltip title="Delete permanently">
        <x-mbc::icon-button icon="delete" />
    </x-mbc::tooltip>

    <x-mbc::tooltip title="Click to see more options">
        <x-mbc::button label="Options" variant="raised" />
    </x-mbc::tooltip>
</div>

Note: Tooltips appear on hover, focus, and long press. They automatically position themselves to stay within the viewport.

Rich Tooltip link

Rich tooltips provide more detailed information with optional titles, body text, and action buttons. Use named slots title, body, and action. 

<div style="display: flex; gap: 2rem; align-items: center; padding: 2rem; flex-wrap: wrap;">
    <x-mbc::tooltip>
        <x-mbc::icon-button icon="info" />

        <x-slot:title>Rich Tooltip Title</x-slot:title>
        <x-slot:body>
            This is a rich tooltip with more detailed information. It can contain multiple lines of text.
        </x-slot:body>
        <x-slot:action>
            <x-mbc::button label="Learn More" variant="text" />
        </x-slot:action>
    </x-mbc::tooltip>

    <x-mbc::tooltip>
        <x-mbc::button label="Help" variant="outlined" />

        <x-slot:title>Need Help?</x-slot:title>
        <x-slot:body>
            Click the button below to access our comprehensive help documentation.
        </x-slot:body>
        <x-slot:action>
            <x-mbc::button label="Open Docs" variant="text" />
        </x-slot:action>
    </x-mbc::tooltip>
</div>

Tip: Rich tooltips are best used for explanations that require more context than simple text.

Persistent Tooltip link

Persistent tooltips remain visible until explicitly dismissed. Set persistent to true. This only works with rich tooltips that have a body slot. 

<div style="display: flex; gap: 2rem; align-items: center; padding: 2rem;">
    <x-mbc::tooltip :persistent="true">
        <x-mbc::button label="Show Persistent Tooltip" variant="raised" />

        <x-slot:title>Persistent Information</x-slot:title>
        <x-slot:body>
            This tooltip stays open until you click outside or press Escape. It's useful for important information that users need to acknowledge.
        </x-slot:body>
        <x-slot:action>
            <x-mbc::button label="Got It" variant="text" />
        </x-slot:action>
    </x-mbc::tooltip>
</div>

Important: Persistent tooltips require a body slot and will throw an error if used with plain tooltips.

Tooltip Positioning link

Tooltips automatically position themselves to stay within the viewport. They adjust their placement based on available space around the anchor element. 

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 3rem; min-height: 300px;">
    <div style="display: flex; justify-content: center; align-items: start;">
        <x-mbc::tooltip title="Tooltip at top">
            <x-mbc::button label="Top" variant="outlined" />
        </x-mbc::tooltip>
    </div>

    <div></div>

    <div style="display: flex; justify-content: center; align-items: start;">
        <x-mbc::tooltip title="Tooltip at top right">
            <x-mbc::button label="Top Right" variant="outlined" />
        </x-mbc::tooltip>
    </div>

    <div style="display: flex; justify-content: start; align-items: center;">
        <x-mbc::tooltip title="Tooltip on left">
            <x-mbc::button label="Left" variant="outlined" />
        </x-mbc::tooltip>
    </div>

    <div style="display: flex; justify-content: center; align-items: center;">
        <x-mbc::tooltip title="Tooltip at center">
            <x-mbc::button label="Center" variant="outlined" />
        </x-mbc::tooltip>
    </div>

    <div style="display: flex; justify-content: end; align-items: center;">
        <x-mbc::tooltip title="Tooltip on right">
            <x-mbc::button label="Right" variant="outlined" />
        </x-mbc::tooltip>
    </div>

    <div style="display: flex; justify-content: center; align-items: end;">
        <x-mbc::tooltip title="Tooltip at bottom">
            <x-mbc::button label="Bottom" variant="outlined" />
        </x-mbc::tooltip>
    </div>

    <div></div>

    <div style="display: flex; justify-content: center; align-items: end;">
        <x-mbc::tooltip title="Tooltip at bottom right">
            <x-mbc::button label="Bottom Right" variant="outlined" />
        </x-mbc::tooltip>
    </div>
</div>

Note: Material Design tooltips use intelligent positioning that adapts based on available screen space. You don't need to specify position manually.

Properties link

mbc::tooltip link

Name Type Default Description
action html null Action buttons for rich tooltip
body string null Body content for rich tooltip (enables rich tooltip mode)
id string auto Unique identifier for the tooltip (auto-generated if not provided)
persistent boolean false Whether the tooltip is persistent (stays open)
slot html The anchor element that triggers the tooltip
title string null The text content for plain tooltip

References link

Edit this page