@exmg/exmg-tooltip
v8.2.3
Published
Tooltip element to display small amounts of information bound to an element.
Downloads
219
Readme
<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 |