Skip to content

💬 Graceful CSS-only tooltips in under 1kb gzipped.

License

Notifications You must be signed in to change notification settings

alcidesqueiroz/tooltippy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tooltippy Build status

💬 Graceful CSS-only tooltips in under 1kb gzipped.

Tooltippy is sexy!

Install

With npm:

$ npm install tooltippy

With Yarn:

$ yarn add tooltippy

Usage

  1. Pick one of the available themes (you can see animated previews below);
  2. Import your theme's stylesheet (from inside the /dist folder). Naturally, the recommended format for production is the minified one, but expanded and debug versions are available for each theme too;
  3. In your target element, set the value of the data-tooltippy attribute to the text you want to show;
  4. Add the .tooltippy class to your target element;
  5. Define the position of your tooltip by using one of the existing direction classes (.tooltippy--top, .tooltippy--left, .tooltippy--bottom and .tooltippy--right);
  6. Optional step: If you want, you can import the suggested font-face for the theme you have chosen. All theme stylesheets have font-stacks with similar web-safe font-families as fallback.
<div class="tooltippy tooltippy--top" data-tooltippy="Hodor... Hodor?? Hodor!">
  <img src="hodor.jpg" />
</div>
  • IMPORTANT NOTICE 1: In order to behave correctly, the tooltip target element MUST have its position set to relative, absolute or fixed.
  • IMPORTANT NOTICE 2: Replaced elements (like img or input) can't be used as target.

Themes

Hipster

Hipster theme

Biz

Biz theme

Translucid

Translucid theme

High contrast

High contrast theme

Author

Alcides Queiroz Aguiar

License

This code is free to use under the terms of the MIT License.