@shawyu/tooltip
v1.0.6
Published
tooltip
Downloads
12
Readme
@shawyu/tooltip
Tooltip plugins are a useful and widely-adopted feature in web development, especially in user interfaces (UI) where they provide additional information or context to elements on a page without cluttering the main content area.
Tooltip.js is an lightweight bubble hint library for JavaScript and Node.js.
https://github.com/shawyuu/js-plugin/tree/main/tooltip
Getting started
Install
npm install @shawyu/tooltip
In browser
<script src="../tooltip/index.js"></script>
Usage
import Tooltip from '@shawyu/tooltip'
Tooltip.show(selector,option)
Target types [selector]
The first argument is the targets you want to give tooltips to. This can represent one or many different elements.
// String (CSS selector matching elements on the document)
Tooltip.show('#id');
Tooltip.show('.class');
Tooltip.show('[data-tip-content]');
// Element
Tooltip.show(document.getElementById('element'));
// Element[]
Tooltip.show([element1, element2]);
// NodeList
Tooltip.show(document.querySelectorAll('elements'));
Content types
Plain text and HTML (string or element) are allowed.
Tooltip.show('#id', {
content: 'Tooltip Content',
attr:'', // higher priority than content
placement: 'top-start',
showArrow:true,
bgColor:"#333",
animation:"FadeDown"
});
Give elements you would like to give tooltips to a data-tip-content
attribute or custom attribute,like data-custom-content
.
<button data-tip-content="Tooltip Content">Text</button> <!-- default attribute -->
<button data-custom-content="Tooltip Content">Text</button> <!-- custom attribute -->
<button data-others="Tooltip Content">Text</button> <!-- custom attribute -->
Call the Tooltip.show() function.
Tooltip.show('[data-tip-content]'); /*default attribute*/
Tooltip.show('[data-tip-content]',{ /*Or customize the text content to be prompted*/
content:"Tooltip Content"
});
Tooltip.show('[data-custom-content]',{ /*custom attribute*/
attr:"data-custom-content"
});
If targeting a single element.
<button id="singleElement">Text</button>
Tooltip.show('#singleElement',{
content:"Tooltip Content"
});
All Props
|PROP|DEFAULT|DESCRIPTION|
|:-:|:-:|:-:|
|content| ""
|The content of the tooltip.Possible values: string
or HTML Content
|
|attr| data-tip-content
| Custom attribute names on tags.it can replace content
, with higher priority than that.|
|placement| top
|Positions the tooltip relative to its reference element. Possible values:top
, top-start
, top-end
, bottom
, bottom-start
, bottom-end
, left
, left-start
, left-end
, right
, right-start
, right-end
|
|showArrow| true
| Determines if the tooltip has an arrow.|
|animation| FadeDown
| The type of transition animation.Possible values:FadeDown
、Fade
|
|bgColor| #333
| Background of the tooltip. when showArrow
is false
, it takes effect.it can be a color or gradient color.Possible values:#f00
、rgba(255,0,0,0.8)
、linear-gradient(45deg, #9fe597 0%, #cce581 99%, #fad0c4 100%)
|
Logs
1.0.4 Fix initialization duplicate styles
1.0.5 Fix and optimize