Toolbar.Js

A jQuery plugin that creates tooltip style toolbars

Examples

Horizontal toolbar

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

HTML

<div id="user-toolbar-options">
	<a href="#"><i class="icon-user"></i></a>
	<a href="#"><i class="icon-star"></i></a>
	<a href="#"><i class="icon-edit"></i></a>
	<a href="#"><i class="icon-delete"></i></a>
	<a href="#"><i class="icon-ban"></i></a>
</div>

Horizontal toolbar with three items

$('#format-toolbar').toolbar({
	content: '#format-toolbar-options', 
	position: 'top',
	hideOnClick: true
});

HTML

<div id="format-toolbar-options">
	<a href="#"><i class="icon-align-left"></i></a>
	<a href="#"><i class="icon-align-center"></i></a>
	<a href="#"><i class="icon-align-right"></i></a>
</div>

Vertical toolbar

$('#vertical-toolbar').toolbar({
	content: '#user-toolbar-options', 
	position: 'left'
});

HTML

<div id="user-toolbar-options">
	<a href="#"><i class="icon-user"></i></a>
	<a href="#"><i class="icon-star"></i></a>
	<a href="#"><i class="icon-edit"></i></a>
	<a href="#"><i class="icon-delete"></i></a>
	<a href="#"><i class="icon-ban"></i></a>
</div>

Horizontal toolbar trigger by a link

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

HTML

<div id="user-toolbar-options">
	<a href="#"><i class="icon-user"></i></a>
	<a href="#"><i class="icon-star"></i></a>
	<a href="#"><i class="icon-edit"></i></a>
	<a href="#"><i class="icon-delete"></i></a>
	<a href="#"><i class="icon-ban"></i></a>
</div>

Usage

Include the plugin javascript file along with jquery

<script src="jquery.min.js"></script>
<script src="jquery.toolbar.js"></script>

Include the css files

<link href="jquery.toolbar.css" rel="stylesheet" />
<link href="bootstrap.icons.css" rel="stylesheet" />

Define your toolbar HTML

<div id="user-toolbar-options">
	<a href="#"><i class="icon-user"></i></a>
	<a href="#"><i class="icon-star"></i></a>
	<a href="#"><i class="icon-edit"></i></a>
	<a href="#"><i class="icon-delete"></i></a>
	<a href="#"><i class="icon-ban"></i></a>
</div>

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

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

Notes

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

Options

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' or 'left'. Default: top.
hideOnClick	Choose if you want the toolbar to hide when anywhere outside the toolbar is clicked. Default: false.