tooltippy

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

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

• Stylesheet: dist/tooltippy--hipster.min.css
• Suggested font-face: Raleway (weight 500)

Biz

• Stylesheet: dist/tooltippy--biz.min.css
• Suggested font-face: Open Sans (weight 400)

Translucid

• Stylesheet: dist/tooltippy--translucid.min.css
• Suggested font-face: Roboto Slab (weight 300)

High contrast

• Stylesheet: dist/tooltippy--high-contrast.min.css
• Suggested font-face: Roboto (weight 500)

Author

Alcides Queiroz Aguiar

• Website: www.alcidesqueiroz.com
• Medium: @alcidesqueiroz
• Twitter: alcidesqueiroz
• Behance alcidesqueiroz
• Stack Overflow: http://is.gd/aqanso
• E-mail: alcidesqueiroz <at> gmail

License

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