@exmg/exmg-tooltip NPM

`<exmg-tooltip>`

@exmg/exmg-tooltip

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

Installation

npm install @exmg/exmg-tooltip

Example Usage

Standard

<div style="position:relative;">
  <button id="styledBtn">Test</button>
  <exmg-tooltip for="styledBtn">the name means "different lizard"</exmg-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
`--exmg-tooltip-font-size`	`10px`	Font size of tooltip text
`--exmg-tooltip-line-height`	`1`	Text line height
`--exmg-tooltip-background`	`#616161`	Background color
`--exmg-tooltip-opacity`	`0.9`	Tooltip opacity
`--exmg-tooltip-text-color`	`white`	Font color
`--exmg-tooltip-padding`	`8px`	Container padding
`--exmg-tooltip-border-radius`	`2px`	Container border radius
`--exmg-tooltip-min-width`	`initial`	Min width of the tooltip