Tooltip

Demo

Plain

Code

<style>
    .demo-anchor {
        position: relative;
        display: inline-block;
    }
    .demo-row {
        display: flex;
        gap: 32px;
        align-items: center;
        padding: 80px 32px;
    }
</style>

<div class="demo-row">
    <div class="demo-anchor">
        <button>Top</button>
        <mdc-tooltip open position="top">
            <span>Tooltip on top</span>
        </mdc-tooltip>
    </div>

    <div class="demo-anchor">
        <button>Bottom</button>
        <mdc-tooltip open position="bottom">
            <span>Tooltip on bottom</span>
        </mdc-tooltip>
    </div>

    <div class="demo-anchor">
        <button>Left</button>
        <mdc-tooltip open position="left">
            <span>Tooltip on left</span>
        </mdc-tooltip>
    </div>

    <div class="demo-anchor">
        <button>Right</button>
        <mdc-tooltip open position="right">
            <span>Tooltip on right</span>
        </mdc-tooltip>
    </div>
</div>

Position

Code

<style>
    .demo-anchor {
        position: relative;
        display: inline-block;
    }
    .demo-row {
        display: flex;
        gap: 32px;
        align-items: center;
        padding: 32px;
    }
    .demo-column {
        display: flex;
        flex-direction: column;
        gap: 80px;
        padding: 32px;
    }
</style>

<div class="demo-column">
    <div class="demo-row">
        <div class="demo-anchor">
            <button>Top</button>
            <mdc-tooltip open position="top">
                <span>Tooltip on top</span>
            </mdc-tooltip>
        </div>

        <div class="demo-anchor">
            <button>Bottom</button>
            <mdc-tooltip open position="bottom">
                <span>Tooltip on bottom</span>
            </mdc-tooltip>
        </div>
    </div>

    <div class="demo-row">
        <div class="demo-anchor">
            <button>Left</button>
            <mdc-tooltip open position="left">
                <span>Tooltip on left</span>
            </mdc-tooltip>
        </div>

        <div class="demo-anchor">
            <button>Right</button>
            <mdc-tooltip open position="right">
                <span>Tooltip on right</span>
            </mdc-tooltip>
        </div>
    </div>
</div>

Rich

Code

<style>
    .demo-anchor {
        position: relative;
        display: inline-block;
    }
    .demo-row {
        display: flex;
        gap: 32px;
        align-items: flex-start;
        padding: 80px 32px;
    }
</style>

<div class="demo-row">
    <div class="demo-anchor">
        <button>Rich Tooltip</button>
        <mdc-tooltip open rich position="top">
            <span slot="headline">Rich Tooltip</span>
            <span>Rich tooltips support multiple lines of informational text. They can include a title and action buttons.</span>
            <div slot="actions">
                <button>Learn More</button>
            </div>
        </mdc-tooltip>
    </div>

    <div class="demo-anchor">
        <button>No Title</button>
        <mdc-tooltip open rich position="bottom">
            <span>Rich tooltips without a title can still provide detailed information about elements.</span>
            <div slot="actions">
                <button>OK</button>
            </div>
        </mdc-tooltip>
    </div>

    <div class="demo-anchor">
        <button>No Actions</button>
        <mdc-tooltip open rich position="top">
            <span slot="headline">No Actions</span>
            <span>Rich tooltips can also appear without action buttons.</span>
        </mdc-tooltip>
    </div>
</div>