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

html5tooltipsjs

v1.7.3

Published

Tooltips with smooth 3D animation.

Downloads

40

Readme

npm npm

html5tooltips.js

Tooltips, written in pure JavaScript, with smooth 3D animation implemented in CSS. No framework required. http://ytiurin.github.io/html5tooltipsjs

Install

npm install html5tooltipsjs

or

bower install html5tooltipsjs

Simple usage

The simplest way to tie a tooltip to a specific UI element is to add a data-* attribute to an element's HTML code.

<span data-tooltip="Refresh"></span>

Add extra attributes to customize a tooltip.

<span data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo"
  data-tooltip-animate-function="foldin"></span>

Customization inheritance

To customize multiple tooltips with less of code, add a data-* attribute to their shared parent element (or document body).

<body data-tooltip-animate-function="foldin">
  <div data-tooltip-color="bamboo">
    <span data-tooltip="Build"></span>
    <span data-tooltip="Refresh"></span>
    <span data-tooltip="Delete"></span>
  </div>
</body>

Advanced usage

You may use a JavaScript constructor to abstract from your view layer.

html5tooltips({
  animateFunction: "spin",
  color: "bamboo",
  contentText: "Refresh",
  stickTo: "right",
  targetSelector: "#refresh"
});

There is an extra feature in html5tooltips.js that allows to show extended text in the tooltip, when user focuses on input field and editable element. You can use plain text or HTML formatting.

html5tooltips({
  contentText: "Not less then 8 symbols",
  contentMore: "Use lower and UPPER case letters, num<span style='color:red'>6</span>ers and spec<span style='color:red'>!</span>al symbols to make password safe and secure.",
  maxWidth: "180px",
  targetSelector: "#password"
});

Define multiple tooltips by passing an array of tooltip objects to the Javascript constructor.

html5tooltips([
  {
    animateFunction: "spin",
    color: "#FF0000",
    contentText: "Refresh",
    stickTo: "right",
    targetSelector: "#refresh"
  },
  {
    contentText: "Simple to remember",
    contentMore: "Check that your login name is not used by anyone else.",
    stickTo: "left",
    maxWidth: "180px",
    targetSelector: "#username"
  }
]);

Styling

To modify tooltip presentation, simply apply styling to it's root element .html5tooltip-box. Properties background-color, color, border-radius, box-shadow, font-family and font-size will propogate to the tooltip text container and pointer.

.html5tooltip-box
{
  background-color: #2A2A2A;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 10px rgba(255,255,255,.15);
  color: #F7F7F7;
  font-family: arial,sans-serif;
  font-size: 11px;
  font-weight: bold;
}

For Single Page Applications

Refresh tooltips when you update declarative announcement of tooltips or when DOM change, affecting tooltips target elements.

html5tooltips.refresh();

HTML5Tooltip UI Component

var tooltip = new HTML5TooltipUIComponent;
var target = document.getElementById("refresh");

tooltip.set({
  animateFunction: "spin",
  color: "bamboo",
  contentText: "Refresh",
  stickTo: "right",
  target: target
});

target.addEventListener('mouseenter',function(){
  tooltip.show();
});

target.addEventListener('mouseleave',function(){
  tooltip.hide();
});

tooltip.mount();

Get a tooltip by the target element

var tooltip = html5tooltips.getTooltipByTarget(document.getElementById('myElement'));

tooltip.destroy();

List of possible parameters

  • animateFunction - Choose one of the available animate functions: fadein, foldin, foldout, roll, scalein, slidein, spin. Default value fadein.
  • color - Any CSS color or one of the predefined colors: daffodil, daisy, mustard, citrus-zest, pumpkin, tangerine, salmon, persimmon, rouge, scarlet, hot-pink, princess, petal, lilac, lavender, violet, cloud, dream, gulf, turquoise, indigo, navy, sea-foam, teal, peacock, ceadon, olive, bamboo, grass, kelly, forrest, chocolate, terra-cotta, camel, linen, stone, smoke, steel, slate, charcoal, black, white, metalic-silver, metalic-gold, metalic-copper.
  • contentText - Text for a tooltip; HTML may be applied.
  • contentMore - Text for the expanded version of a tooltip which shows up when focused on a target element; HTML may be applied.
  • delay - Delay the tooltip show up in milliseconds. Default value is 500.
  • hideDelay - Delay the tooltip hide in milliseconds, if the tooltip is persistent. Default value is 300.
  • disableAnimation - Disable the animation: true or false. Default value is false.
  • maxWidth - The maximum width of the expanded version of the tooltip.
  • persistent - If set to true, the tooltip will wait for hideDelay number of milliseconds before hide. Default value is false.
  • stickTo - Choose one of the available stick values: bottom, left, right, top. Default value is bottom.
  • stickDistance - The number of pixels that represent the distance between the tooltip and a target element.
  • targetSelector - A CSS selector which is used to catch a target element in the document.

List of possible data-* attributes

  • data-tooltip - Value for the contentText parameter.
  • data-tooltip-animate-function - Value for the animateFunction parameter.
  • data-tooltip-disable-animation - Value for the disableAnimation parameter.
  • data-tooltip-color - Value for the color parameter.
  • data-tooltip-delay - Value for the delay parameter.
  • data-tooltip-hide-delay - Value for the hideDelay parameter.
  • data-tooltip-maxwidth - Value for the maxWidth parameter.
  • data-tooltip-more - Value for the contentMore parameter.
  • data-tooltip-persistent - Value for the persistent parameter.
  • data-tooltip-stickto - Value for the stickTo parameter.

Browser compatibility

Tooltips are compatible with old browsers including IE7. Animation works in Chrome 1.0, Firefox 2.0, Internet Explorer 10, Opera 10.5, Safari 3.2.