jQuery Plugin To Create Tooltip Style Toolbars - Toolbar.js

Toolbar.js is a simple, lightweight jQuery plugin for creating a tooltip-style, CSS3 animated, floating and fully configurable tooltip attaching to any DOM elements.

Basic usage:

1. Load jQuery library and the jQuery toolbar plugin's JS & CSS files in the document.

<link href="jquery.toolbar.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.toolbar.js"></script>

2. Load the Font Awesome 4 for toolbar icons.

<link rel="stylesheet" href="font-awesome.min.css">

3. Create a toolbar that is hidden by default.

<div id="social-medias" class="hidden">
   <a href="#"><i class="fa fa-facebook"></i></a>
   <a href="#"><i class="fa fa-twitter"></i></a>
   <a href="#"><i class="fa fa-google-plus"></i></a>
   <a href="#"><i class="fa fa-linkedin"></i></a>
</div>

4. Attach the toolbar to a given element.

$('#el').toolbar({
  content: '#social-medias',
  // more options here.
});

5. Full plugin options.

$('#el').toolbar({

  // The ID of the element containing the icons HTML.
  content: '#myContent',

  // 'top', 'bottom', 'left' or 'right
  position: 'top',

  // Hide the toolbar on click
  hideOnClick: false,

  // CSS z-index property
  zIndex: 120,
  hover: false,

  // Choose the style of the toolbar.
  // default, primary, danger, warning, info
  // success, info-o, dark or light
  style: 'default',

  // Choose the animation of the toolbar.
  // standard, flip, grow, flyin, and bounce
  animation: 'standard',

  // Adjust the position of where the toolbar appears
  adjustment: 10
  
});

6. You can attach the toolbar to multiple elements by using html5 data-* attribute.

<div id="el"
   data-toolbar="social-medias" 
   data-toolbar-event="click" 
   data-toolbar-style="primary"
   ...
>

7. Method.

// Obtain the element that wraps every tool button
$('#el').toolbar('getToolbarElement');

8. Events.

// Triggered when the toolbar is shown.
$('#element').on('toolbarShown',
   function( event ) {
      // ...
   }
);

// Triggered when the toolbar is hidden.
$('#element').on('toolbarHidden',
   function( event ) {
      // ...
   }
);

// Triggered when a button in the toolbar is clicked. The toolbar item clicked is also passed through for this event.
$('#element').on('toolbarItemClick',
   function( event ) {
      // ...
   }
);

---

This awesome jQuery plugin is developed by paulkinzett. For more Advanced Usages, please check the demo page or visit the official website.