Create iOS Styled Tooltip Toolbars Easily with Toolbar.js

If you are looking for iOS styled toolbars for any website, Toolbar.js is best. It’s a JQuery plugin which offers a very simple, yet decent way of creating tooltip style toolbars for use in web application and websites. The toolbar is easily customisable using the twitter bootstrap icons and provides flexibility around the toolbars display with number of icons.

Features of Toolbar.js

  • Straightforward implementation with simple options
  • Can run as many toolbars as required
  • Toolbars can be attached to any element required
  • Toobar icons are easily customised through the popular twitter bootstrap framework
  • Toolbars are responsive and follow the element on resize

Download Details

Author Demo Download

Usage of Toolbar.js

First we include the plugin javascript file along with jquery:

  1. <script src=“jquery.min.js”></script>  
  2. <script src=“jquery.toolbar.js”></script>  

Then we position the stylesheets for the toolbars and for the Bootstrap icons:

  1. <link href=“jquery.toolbar.css” rel=“stylesheet” />  
  2. <link href=“bootstrap.icons.css” rel=“stylesheet” />  

After above step we will define the toolbar itself, which could look like this:

  1. <div id=“user-toolbar-options”>  
  2.     <a href=“#”><i class=“icon-user”></i></a>  
  3.     <a href=“#”><i class=“icon-star”></i></a>  
  4.     <a href=“#”><i class=“icon-edit”></i></a>  
  5.     <a href=“#”><i class=“icon-delete”></i></a>  
  6.     <a href=“#”><i class=“icon-ban”></i></a>  
  7. </div>      

As we see, that the icons are called with their respective classes from Bootstrap. The actions, that you want to be linked to the individual icon, have to be called through the element. The last task to perform is the connection of the toolbar to the element, which you want to trigger.

  1. $(‘#element’).toolbar( options );  

The options are the position of the bar, which can be above or below as well as left or right from the element, where above and below show a horizontal bar, while left or right lead to a vertical look.

The toolbar element definition:

  1. $(‘#user-toolbar’).toolbar({  
  2.     content: ‘#user-toolbar-options’,   
  3.     position: ‘top’  
  4. });  

The above definition leads to the below screen:

Related posts:


About the Author

A web developer who has a love for creativity and enjoys experimenting with various techniques in both web design and development. If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

One thought on “Create iOS Styled Tooltip Toolbars Easily with Toolbar.js

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>