Tooltip (broken, fix coming soon)1.0
Tooltips display a brief, informative message that appears when a user interacts with an element.
Installation
npm i @tryg/ui-libraryUsage
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-spinner';
defineCustomElement();
</script>
<p id="info">What is Toxoplasma Gondii?</p>
<anchor-tooltip target="#info" text="A mind controlling fungus." />Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<p id="info">What is Toxoplasma Gondii?</p>
<anchor-tooltip target="#info" text="A mind controlling fungus." />API
Tooltip
A basic tooltip component.
It has several useful inbuilt features.
1. Stays within viewport. Translating x/y transform and/or
changing position if supplied position renders it partially or completely outside viewport.
2. The trigger mouseenter will default to a click trigger if device displaying component doesn't have hover capabilities (tablet, phone, etc....)
Usage
Basic usage
<p id="info">What is Toxoplasma Gondii?</p>
<anchor-tooltip target="#info" text="A mind controlling fungus." />With a class selector as target. (Only an example. You should prefer unique selectors like id or similar)
<p class="info">What is Toxoplasma Gondii?</p>
<anchor-tooltip target=".info" text="A mind controlling fungus." />Appear really fast and stay for a loooong time
<p id="info">What is Toxoplasma Gondii?</p>
<anchor-tooltip appearDelay="0" duration="13371337" target="#info" text="A mind controlling fungus." />Advanced usage
Triggering manually
<p id="info">What is Toxoplasma Gondii?</p>
<anchor-tooltip id="infoTip" target="#info" text="A mind controlling fungus." />
<script>
document.querySelector('#infoTip').open();
</script>Custom tooltip content
<p id="info">What is Toxoplasma Gondii?</p>
<anchor-tooltip target="#info">
<h1>Custom content simply goes inside the anchor-tooltip tag</h1>
<img src="http://www.placecage.com/200/200" />
</anchor-tooltip>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
appearDelay | appear-delay | Time from trigger event until tooltip appearing. | number | 350 |
duration | duration | How long before tooltip closes. Only works when trigger is mouseenter. | number | 400 |
position | position | "bottom" | "left" | "right" | "top" | 'bottom' | |
target | target | tooltip uses querySelector(target) to select the trigger element. | string | undefined |
text | text | Text to display in the tooltip | string | '' |
tooltipId | tooltip-id | The id of the tooltip component | string | `anchor-tooltip-${generateGuid()}` |
trigger | trigger | "click" | "manual" | "mouseenter" | 'mouseenter' |
Methods
close() => Promise<void>
Returns
Type: Promise<void>
open() => Promise<void>
Returns
Type: Promise<void>
Dependencies
Used by
Graph
Built with StencilJS