@exmg/exm-tooltip NPM

`<exm-tooltip>`

@exmg/exm-tooltip

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

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