Tooltip Box

<mdc-tooltip-box>
    <mdc-button variant="filled">Hover for tooltip</mdc-button>
    <mdc-tooltip slot="tooltip">This is a plain tooltip</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box>
    <mdc-button variant="outlined">Another button</mdc-button>
    <mdc-tooltip slot="tooltip">Short tip</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box>
    <mdc-icon-button icon="delete"></mdc-icon-button>
    <mdc-tooltip slot="tooltip">Delete this item</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="top">
    <mdc-button variant="filled">Top</mdc-button>
    <mdc-tooltip slot="tooltip">placement="top"</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="top-start">
    <mdc-button variant="filled">Top Start</mdc-button>
    <mdc-tooltip slot="tooltip">placement="top-start"</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="top-end">
    <mdc-button variant="filled">Top End</mdc-button>
    <mdc-tooltip slot="tooltip">placement="top-end"</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="bottom">
    <mdc-button variant="filled">Bottom</mdc-button>
    <mdc-tooltip slot="tooltip">placement="bottom"</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="bottom-start">
    <mdc-button variant="filled">Bottom Start</mdc-button>
    <mdc-tooltip slot="tooltip">placement="bottom-start"</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="bottom-end">
    <mdc-button variant="filled">Bottom End</mdc-button>
    <mdc-tooltip slot="tooltip">placement="bottom-end"</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="left">
    <mdc-button variant="filled">Left</mdc-button>
    <mdc-tooltip slot="tooltip">placement="left"</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="left-start">
    <mdc-button variant="filled">Left Start</mdc-button>
    <mdc-tooltip slot="tooltip">placement="left-start"</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="left-end">
    <mdc-button variant="filled">Left End</mdc-button>
    <mdc-tooltip slot="tooltip">placement="left-end"</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="right">
    <mdc-button variant="filled">Right</mdc-button>
    <mdc-tooltip slot="tooltip">placement="right"</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="right-start">
    <mdc-button variant="filled">Right Start</mdc-button>
    <mdc-tooltip slot="tooltip">placement="right-start"</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="right-end">
    <mdc-button variant="filled">Right End</mdc-button>
    <mdc-tooltip slot="tooltip">placement="right-end"</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="bottom">
    <mdc-button variant="filled">Rich with headline</mdc-button>
    <mdc-tooltip slot="tooltip" rich>
        <span slot="headline">Sync complete</span>
        <span>All 24 files have been uploaded to the cloud.</span>
        <mdc-button slot="actions">Undo</mdc-button>
    </mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="bottom">
    <mdc-button variant="outlined">Rich no headline</mdc-button>
    <mdc-tooltip slot="tooltip" rich>
        <span>This tooltip has no headline, only content and actions.</span>
        <mdc-button slot="actions">OK</mdc-button>
    </mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box placement="bottom">
    <mdc-icon-button icon="info"></mdc-icon-button>
    <mdc-tooltip slot="tooltip" rich>
        <span slot="headline">About this feature</span>
        <span>This feature enables automatic syncing across all your devices.</span>
    </mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box trigger="hover">
    <mdc-button variant="filled">Hover trigger (default)</mdc-button>
    <mdc-tooltip slot="tooltip">Shows on pointer enter, hides on pointer leave</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box trigger="focus">
    <mdc-button variant="outlined">Focus trigger</mdc-button>
    <mdc-tooltip slot="tooltip">Shows on focus in, hides on focus out. Tab to this button.</mdc-tooltip>
</mdc-tooltip-box>

<mdc-tooltip-box trigger="manual" id="manual-tooltip-box">
    <mdc-button variant="filled" id="manual-btn">Manual trigger</mdc-button>
    <mdc-tooltip slot="tooltip">Controlled via JavaScript</mdc-tooltip>
</mdc-tooltip-box>

<script>
    const tb = document.getElementById('manual-tooltip-box')
    const btn = document.getElementById('manual-btn')
    btn.addEventListener('click', () => {
        if (tb.open) {
            tb.hide()
        } else {
            tb.show()
        }
    })
</script>