Toolbar.Js

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.

Download

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

Features

Straightforward implementation with simple options.
Includes a set of css buttons for use with the toolbars.
You can run as many toolbars as required.
Toolbars can be attached to any element required.
Toobar icons are easily customised through the popular Font Awesome icons.
Plenty of options to customised how your toolbar functions including position, animations and events.
Toolbars are responsive and follow the buttons on resize.
Makes full use of CSS3 for animations.

Examples

Default

Colorful

Shades

Customizable

Animations

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>
</div>

Attach the toolbar to an element passing in your options as an object. Available options are detailed below.

$('#element').toolbar( options );

Options

Content

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

$('#button').toolbar({
	content: '#toolbar-options',
});

Position

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.

$('#button').toolbar({
	content: '#toolbar-options',
	position: 'bottom'
});

Style

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).

$('#button').toolbar({
	content: '#toolbar-options',
	position: 'bottom',
	style: 'primary'
});

Animation

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.

$('#button').toolbar({
	content: '#toolbar-options',
	position: 'bottom',
	style: 'primary',
	animation: 'flip'
});

Event

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

$('#button').toolbar({
	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.

$('#button').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.

$('a').toolbar({
	content: '#tool-options',
	position: 'top',
	adjustment: 35
});

Notes

The element that triggers the toolbar will gain the class .pressed when the toolbar is visible.
Define any javascript for icon actions before calling the toolbar.

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.

<div
   data-toolbar="user-options"
   data-toolbar-event="click"
   data-toolbar-style="primary"
>

Events

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.

$('#element').on('toolbarShown',
   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.

Methods

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