<exm-tooltip>

@exmg/exm-tooltip

Tooltip element to display small amounts of information bound to an element.

Demo

Installation

npm install @exmg/exm-tooltip

Example Usage

Standard

<div style="position:relative;">
  <button id="styledBtn">Test</button>
  <exm-tooltip for="styledBtn">the name means "different lizard"</exm-tooltip>
</div>

API

Slots

| Name | Description | | --------- | ---------------------------------- | | default | Button to handle copy to clipboard |

Properties/Attributes

| Name | Type | Default | Description | | -------------------- | --------- | ---------- | ----------------------------------------------------------------------------------------------------- | | for | string | None | The id of the element that the tooltip is anchored to. This element must be a sibling of the tooltip. | | position | string | bottom | Positions the tooltip to the top, right, bottom, left of its content. | | fitToVisibleBounds | boolean | None | The id of the element that the tooltip is anchored to. This element must be a sibling of the tooltip. | | xOffset | number | None | X axis offset from the parent's center. | | yOffset | number | None | Y axis offset from the parent's center. |

Methods

None

Events

None

CSS Custom Properties

| Name | Default | Description | | ----------------------------- | --------- | ------------------------- | | --exm-tooltip-font-size | 10px | Font size of tooltip text | | --exm-tooltip-line-height | 1 | Text line height | | --exm-tooltip-background | #616161 | Background color | | --exm-tooltip-opacity | 0.9 | Tooltip opacity | | --exm-tooltip-text-color | white | Font color | | --exm-tooltip-padding | 8px | Container padding | | --exm-tooltip-border-radius | 2px | Container border radius | | --exm-tooltip-min-width | initial | Min width of the tooltip |

Additional references

• Additional Documentation

• Demo