npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@shawyu/tooltip

v1.0.6

Published

tooltip

Downloads

6

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.

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

|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:FadeDownFade| |bgColor| #333 | Background of the tooltip. when showArrow is false, it takes effect.it can be a color or gradient color.Possible values:#f00rgba(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