1.0.2 • Published 8 months ago
@exmg/exm-tooltip v1.0.2
<exm-tooltip> 
@exmg/exm-tooltip
Tooltip element to display small amounts of information bound to an element.
Installation
npm install @exmg/exm-tooltipExample 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 |