@shawyu/tooltip v1.0.6

@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.

Github地址

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

Logs

1.0.4 Fix initialization duplicate styles\ 1.0.5 Fix and optimize