Vanilla Javascript Tooltip

About

Libraries such as jQuery, MooTools, Dojo and others are truly awesome and powerful, but sometimes it's completely unnecessary to load 100-200Kb of libraries and plugins for a simple thing, like a carousel, tooltip or accordion.

That's when the Vanilla Javascript series come in handy to save on page weight and decrease download times with one of the following:

• Carousel
• Tooltip
• Accordion
• Select
• Tabs

— Inspired by the blazing fast, lightweight, cross-platform Vanilla JS framework.

Usage

1. Set up a tooltip in your HTML

   <span data-tooltip="Lorem ipsum tooltip text">Lorem ipsum</span>

2. Optional - Set the position of the tooltip

   <span data-tooltip="..." data-position="left top">Lorem ipsum</span>

   If the position is not defined the script defaults to data-position="center top" which positions the tooltip centered above the trigger. These are the possible values for data-position:

   Value	Position
   left top	Left top corner
   center top	Horizontally centered on top
   right top	Right top corner
   right center	Vertically centered on the right
   right bottom	Right bottom corner
   center bottom	Horizontally centered at the bottom
   left bottom	Bottom left corner
   left center	Vertically centered on the left

3. Include the styles

   <link rel="stylesheet" href="vanilla-js-tooltip.css" />

   and the script

   <script src="vanilla-js-tooltip.min.js"></script>

4. Call it

   var tooltip = new Tooltip({
       theme: "light", // Selects one of the pre-defined tooltip styles - light or dark.
       distance: 5,    // Specifies the distance in pixels from trigger to tooltip.
       delay: 0        // Specifies how long the tooltip remains visible (in ms) after the mouse leaves the trigger.
   });

Download

Available at GitHub