Tooltip

<pc-tooltip>

0.4.0

experimental

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Tooltips display additional information based on a specific action.

A tooltip’s target is its first child element, so you should only wrap one element inside the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.

<pc-tooltip content="This is a tooltip!">
    <pc-button>Hover me</pc-button>
</pc-tooltip>

Code

Edit

Demos#

Placement#

Use the placement attribute to set the preferred placement of the tooltip.

<div class="tooltip-placement">
    <div class="tooltip-placement-row">
        <pc-tooltip content="top-start" placement="top-start">
            <pc-button></pc-button>
        </pc-tooltip>

        <pc-tooltip content="top" placement="top">
            <pc-button>
                <pc-icon
                    library="default"
                    icon-style="solid"
                    name="arrow-up"
                ></pc-icon>
            </pc-button>
        </pc-tooltip>

        <pc-tooltip content="top-end" placement="top-end">
            <pc-button></pc-button>
        </pc-tooltip>
    </div>

    <div class="tooltip-placement-row">
        <pc-tooltip content="left-start" placement="left-start">
            <pc-button></pc-button>
        </pc-tooltip>

        <pc-tooltip content="right-start" placement="right-start">
            <pc-button></pc-button>
        </pc-tooltip>
    </div>

    <div class="tooltip-placement-row">
        <pc-tooltip content="left" placement="left">
            <pc-button>
                <pc-icon
                    library="default"
                    icon-style="solid"
                    name="arrow-left"
                ></pc-icon>
            </pc-button>
        </pc-tooltip>

        <pc-tooltip content="right" placement="right">
            <pc-button>
                <pc-icon
                    library="default"
                    icon-style="solid"
                    name="arrow-right"
                ></pc-icon>
            </pc-button>
        </pc-tooltip>
    </div>

    <div class="tooltip-placement-row">
        <pc-tooltip content="left-end" placement="left-end">
            <pc-button></pc-button>
        </pc-tooltip>

        <pc-tooltip content="right-end" placement="right-end">
            <pc-button></pc-button>
        </pc-tooltip>
    </div>

    <div class="tooltip-placement-row">
        <pc-tooltip content="bottom-start" placement="bottom-start">
            <pc-button></pc-button>
        </pc-tooltip>

        <pc-tooltip content="bottom" placement="bottom">
            <pc-button>
                <pc-icon
                    library="default"
                    icon-style="solid"
                    name="arrow-down"
                ></pc-icon>
            </pc-button>
        </pc-tooltip>

        <pc-tooltip content="bottom-end" placement="bottom-end">
            <pc-button></pc-button>
        </pc-tooltip>
    </div>

</div>

<style>
    .tooltip-placement {
        margin: 1rem;
        inline-size: 250px;
    }

    .tooltip-placement-row::after {
        content: "";
        display: table;
        clear: both;
    }

    .tooltip-placement pc-button {
        float: left;
        margin-inline-end: 0.25rem;
        margin-block-end: 0.25rem;
        inline-size: 2.5rem;
    }

    .tooltip-placement-row:nth-child(1)
        pc-tooltip:first-child
        pc-button,
    .tooltip-placement-row:nth-child(5)
        pc-tooltip:first-child
        pc-button {
        margin-inline-start: calc(40px + 0.25rem);
    }

    .tooltip-placement-row:nth-child(2)
        pc-tooltip:nth-child(2)
        pc-button,
    .tooltip-placement-row:nth-child(3)
        pc-tooltip:nth-child(2)
        pc-button,
    .tooltip-placement-row:nth-child(4)
        pc-tooltip:nth-child(2)
        pc-button {
        margin-inline-start: calc((40px * 3) + (0.25rem * 3));
    }
</style>

Code

Edit

Click trigger#

Set the trigger attribute to click to toggle the tooltip on click instead of hover.

<pc-tooltip content="Click again to dismiss" trigger="click">
    <pc-button>Click to toggle</pc-button>
</pc-tooltip>

Code

Edit

Manual trigger#

Tooltips can be controlled programmatically by setting the trigger attribute to manual. Use the open attribute to control when the tooltip is shown.

<pc-button style="margin-inline-end: 4rem">Toggle manually</pc-button>

<pc-tooltip class="tooltip-manual" content="This is an avatar" trigger="manual">
    <pc-avatar label="User"></pc-avatar>
</pc-tooltip>

<script>
    const tooltip = document.querySelector(".tooltip-manual");
    const toggle = tooltip.previousElementSibling;

    toggle.addEventListener("click", () => (tooltip.open = !tooltip.open));
</script>

Code

Edit

Removing arrows#

You can control the size of tooltip arrows by overriding the --pc-tooltip-arrow-size custom property. To remove them, set the value to 0 as shown below.

<pc-tooltip
    content="This is a tooltip without an arrow."
    style="--pc-tooltip-arrow-size: 0"
>
    <pc-button>No arrow</pc-button>
</pc-tooltip>

Code

Edit

To override it globally, set it in a root block in your styles after the Placer Toolkit styles are loaded.

  :root {
    --pc-tooltip-arrow-size: 0;
} 

HTML in tooltips#

Use the content slot to create tooltips with HTML content. Tooltips are designed only for text and presentational elements. Avoid placing interactive content, such as buttons, links and form controls, in a tooltip.

<pc-tooltip>
    <div slot="content">
        I’m not <strong>just</strong> a tooltip, I’m a <em>tooltip</em> with HTML!
    </div>

    <pc-button>Hover me</pc-button>
</pc-tooltip>

Code

Edit

Set a maximum width#

Use the --max-width custom property to change the width the tooltip can grow to before it wraps.

<pc-tooltip
    content="This tooltip will wrap after 80 pixels."
    style="--max-width: 80px"
>
    <pc-button>Hover me</pc-button>
</pc-tooltip>

Code

Edit

Eigenschaften#

Name	Beschreibung	Standard
`content`	The tooltip’s content. If you need to display HTML, use the `content` slot instead. Typ: `string`	`""`
`placement`	The preferred placement of the tooltip. Note that the actual placement will vary as configured to keep the tooltip inside of the viewport. Typ: `"top" \| "top-start" \| "top-end" \| "right" \| "right-start" \| "right-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end"`	`"top"`
`disabled`	Disables the tooltip so it won’t show when triggered. Typ: `boolean`	`false`
`distance`	The distance in pixels from which to offset the tooltip away from its target. Typ: `number`	`8`
`open`	Indicates whether or not the tooltip is open. You can use this instead of the `show()` and `hide()` methods. Typ: `boolean`	`false`
`skidding`	The distance in pixels from which to offset the tooltip along its target. Typ: `number`	`0`
`trigger`	Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus` and `manual`. Multiple options can be passed by separating them with a space. When `manual` is used, the tooltip must be activated programmatically. Typ: `string`	`"hover focus"`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Slots#

Name	Beschreibung
(default)	The tooltip’s target element. Avoid slotting in more than one element, as subsequent elements will be ignored.
`content`	The content to render in the tooltip. Alternatively, you can use the `content` attribute.

Erfahre mehr über die Benutzung von Slots.

Methoden#

Name	Beschreibung	Argumente
`show()`	Shows the tooltip.	‐
`hide()`	Hides the tooltip.	‐

Erfahre mehr über Methoden.

Events#

Name	Beschreibung	Event‐Detail
`pc-show`	Emitted when the tooltip starts to show.	‐
`pc-after-show`	Emitted when the tooltip shows and all animations are complete.	‐
`pc-hide`	Emitted when the tooltip starts to hide.	‐
`pc-after-hide`	Emitted when the tooltip hides and all animations are complete.	‐

Erfahre mehr über Events.

Benutzerdefinierte Eigenschaften#

Name	Beschreibung	Standard
`--max-width`	The maximum width of the tooltip before its content will wrap.	`30ch`
`--hide-delay`	The amount of time to wait before hiding the tooltip when hovering.	`0s`
`--show-delay`	The amount of time to wait before showing the tooltip when hovering.	`0.15s`

Erfahre mehr über das Anpassen von benutzerdefinierten Eigenschaften.

Parts#

Name	Beschreibung
`base`	The component’s base wrapper, a `<pc-popup>` element.
`base-popup`	The popup’s `popup` part. Use this to target the tooltip’s popup container.
`base-arrow`	The popup’s `arrow` part. Use this to target the tooltip’s arrow.

Erfahre mehr über das Anpassen von CSS‐Parts.

Animationen#

Name	Beschreibung
`tooltip.show`	The animation to use when showing the tooltip.
`tooltip.hide`	The animation to use when hiding the tooltip.

Erfahre mehr über das Anpassen von Animationen.

Importieren#

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in dein HTML ein.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/tooltip/tooltip.js"></script> 

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/tooltip/tooltip.js"; 

Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

import "placer-toolkit/dist/components/tooltip/tooltip.js";

Abhängigkeiten#

Diese Komponente importiert automatisch folgende Komponenten:

Popup