@dbp-toolkit/tooltip
v0.1.1
Published
The tooltip component provides an icon as an anker for a tooltip. There is a generic tooltip `<dbp-tooltip>` which supports any icon the app has bundled. Another info tooltip `<dbp-info-tooltip>` shows an embedded info icon (small letter i inside a circle
Downloads
21
Readme
Tooltip Web Component
The tooltip component provides an icon as an anker for a tooltip.
There is a generic tooltip <dbp-tooltip>
which supports any icon the app has bundled.
Another info tooltip <dbp-info-tooltip>
shows an embedded info icon (small letter i inside a circle) as a convenient
shortcut.
Install
You can install this component via npm:
npm i @dbp-toolkit/tooltip
Usage
<dbp-tooltip text-content="text to show" icon-name="information"></dbp-tooltip>
<dbp-info-tooltip text-content="text to show"></dbp-info-tooltip>
<script type="module" src="node_modules/@dbp-toolkit/tooltip/dist/dbp-tooltip.js"></script>
Or directly via CDN:
<dbp-tooltip text-content="text to show" icon-name="information"></dbp-tooltip>
<dbp-info-tooltip text-content="text to show"></dbp-info-tooltip>
<script type="module" src="https://unpkg.com/@dbp-toolkit/[email protected]/dist/dbp-tooltip.js"></script>
Attributes
text-content
: Text to show as tooltip (default is 'text missing.' as a reminder!)icon-name
: (<dbp-tooltip>
only, default is a skull) Name of the bundled icon (SVG) for<dbp-icon>
button-text
: (<dbp-button-tooltip>
only, default is 'submit') Text on the buttontype
: (<dbp-button-tooltip>
only, default is 'submit') Options are 'submit', 'reset', or any stringform-id
: (<dbp-button-tooltip>
only) Id of the from to submit, if omitted the next form in DOM hirachy will be used.