A jQuery plugin that creates tooltip style toolbars

By Paul Kinzett

Toolbar allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using Font Awesome icons and provides flexibility around the toolbars display and number of icons.

A big thanks to the Drunken Parrot UI Kit by Hoarrd for inspiration.


You can show your appreciation for Toolbar.js and support future development by donating




Creating Buttons

The button can be created by adding the class .btn-toolbar to a html element e.g. a div, a, span, button, while the colors can be controller with different CSS classes.

<div class="btn-toolbar">...</div>
<div class="btn-toolbar btn-toolbar-primary">...</div>
<div class="btn-toolbar btn-toolbar-danger">...</div>
<div class="btn-toolbar btn-toolbar-warning">...</div>
<div class="btn-toolbar btn-toolbar-info">...</div>
<div class="btn-toolbar btn-toolbar-success">...</div>
<div class="btn-toolbar btn-toolbar-info-o">...</div>
<div class="btn-toolbar btn-toolbar-dark">...</div>
<div class="btn-toolbar btn-toolbar-light">...</div>

Basic Usage

Include the plugin javascript file along with jquery
<script src="jquery.toolbar.js"></script>

Include the css files
<link href="jquery.toolbar.css" rel="stylesheet" />

Define your toolbar HTML anywhere on the page. This is where you define the icons you want to appear in your toolbar. Remember to add the hidden class so the toolbar doesnt appear on the page.
<div id="toolbar-options" class="hidden">
   <a href="#"><i class="fa fa-plane"></i></a>
   <a href="#"><i class="fa fa-car"></i></a>
   <a href="#"><i class="fa fa-bicycle"></i></a>

Attach the toolbar to an element passing in your options as an object. Available options are detailed below.
$('#element').toolbar( options );



This should be the ID of the element which contains your toolbar icons.

	content: '#toolbar-options',


The toolbar can be positioned to the top, left, right or bottom of the element. Set the value of position to where you want the toolbar to appear.

	content: '#toolbar-options',
	position: 'bottom'


The toolbar color can be set through the style option. It accepts the same values as the css buttons. You can mix and match styles for the buttons and toolbars to create any color combo you want (but genrally the same styles go together).

	content: '#toolbar-options',
	position: 'bottom',
	style: 'primary'


The toolbar animation can be set through the animation option. There are five different options for the animation which can be viewed in the example above. From left to right the options are standard, flip, grow, flyin, and bounce.

	content: '#toolbar-options',
	position: 'bottom',
	style: 'primary',
	animation: 'flip'


The toolbar can be triggered by either a click event, or a hover event. You can set your preference in the event option.

	content: '#toolbar-options',
	position: 'bottom',
	style: 'primary',
	event: 'click'

Hide on Click

The toolbar will be closed when clicking anywhere off the toolbar by setting the hideOnClick option to true (use when you have set the event option as click). If set to false, or not set at all then the user will need to click on the button to close the toolbar.

	content: '#toolbar-options',
	position: 'bottom',
	style: 'primary',
	event: 'click',
	hideOnClick: true

Elements (and Adjustment)

The toolbar can be attached to elements other than buttons, e.g. links or images. Just attach the toolbar function to the element of your choice.

	content: '#tool-options',
	position: 'top',
	adjustment: 35


Options Summary

Option Description
content The ID of the element containing the icons HTML.
position Indicates the display position of the toobar relative to the element its attached agaisnt. Select either 'top', 'bottom', 'left' or 'right. Default: top.
style Choose the style of the toolbar.
animation Choose the animation of the toolbar.
event Choose if you want the toolbar to show on hover, or on click. Use the options 'click' or 'hover'.
hideOnClick Choose if you want the toolbar to hide when anywhere outside the toolbar is clicked. Use when the event option is set to click.
adjustment If you want to adjust the position of where the toolbar appears (closer or further away from the element) then you can use this settings. Its take any positive integer. This will generally be used when attaching toolbars to elements other than standard buttons.

Advanced Usage

Use data attributes to attach a single toolbar to many elements.
<div data-toolbar="user-options"></div>
$('div[data-toolbar="user-options"]').toolbar( options );

You can also set individual toolbar options using data attributes on the buttons.


Below are a list of events that are triggered when certain events happen with the toolbar. You can listen for these events using the .on method.

For example.
   function( event ) {
      // this: the element the toolbar is attached to

Event Description
toolbarShown Triggered when the toolbar is shown.
toolbarHidden Triggered when the toolbar is hidden.
toolbarItemClick Triggered when a button in the toolbar is clicked. The toolbar item clicked is also passed through for this event.


Below is a list of methods available on the elements that already have a toolbar instantiated

Method Arguments Description
getToolbarElement None Obtain the element that wraps every tool button