Enable Tooltip Web Component

This webcomponent follows the open-wc recommendations.

Preamble

Enable webcomponents are very opinionated components for a reason. They were developed for 2 reasons:

1. To be accessible
2. To help developers learn how to code with accessibility in mind.

It's important to match the example implementations and only deviate when the component allows it. If you don't follow the examples, there's a good chance it won't work :)

This tooltip will work without javascript, but has compatibility issues with browser and screen reader combinations. It's focusable with the tabindex="0" attribute.

Installation

npm i enable-wc-tooltip

Note - You must be using a local server that can resolve node_modules internally. We recommend using web-dev-server (https://modern-web.dev/docs/dev-server/overview/) which jas a flag --node-resolve that will resolve the imports automatically. When you're ready to deply to production, you can bundle it with the project compiler.

Usage

<enable-tooltip>
    <div class="tooltip" tabindex="0">
        <button class="tooltip__trigger"><img src="../images/icons8-more-info-24.png" alt="more info" /></button>
        <img class="tooltip__close" src="../images/close.svg" alt="close" />
        <div class="tooltip__content">
            <p>This is a tooltip with a close button.</p>
            <a href="#">This is a link within the tooltip</a>
        </div>
    </div>
</enable-tooltip>

<script type="module">
    import { Tooltip } from 'enable-wc-tooltip';
</script>

Props

There are no configurable props on the tooltip.

Styling

The components use 'parts' to style individual elements. The accordion supports the following parts:

trigger - The button that open and closes the tooltip. When it's open, it has the 'expanded' attribute. content - The content of the tooltip. close - The close button (if applicable).

Example

enable-tooltip::part(<part-name>) {
    /* add styles here */
}