jQuery.beeTooltip

A jQuery plugin to show tooltips


Project maintained by rishabhsrao Hosted on GitHub Pages — Theme by mattgraham

Introduction

jQuery.beeTooltip is a jQuery plugin to show tooltips.

Demo

Hover over the words in the paragraph below...

Hello Lorem ipsum dolor sit amet, consectetur basic tooltip. Nostrum vitae at veritatis facere this tooltip can also be trigged via JavaScript delectus recusandae fugiat omnis commodi quisquam illo alias another tooltip example quod vitae sed assumenda doloribus modi!

You can also trigger tooltips via the JavaScript methods: show() and hide().

How to use

  1. Download the binary files from the /bin directory of the repo. This directory has minified and non-minifed versions of the JavaScript and CSS files. If you're using SCSS/Compass, then you might want to take a look at the .scss file there.
  2. Place the CSS and JavaScript files in your project directory
  3. Make sure jQuery and jQuery UI effects (fade) are included in your page
  4. Reference them in your web page:

    
    <link rel="stylesheet" href="jquery.beeTooltip-0.1.2.min.css" />
    
    <script src="jquery-1.8.3.js"></script>
    <script src="jquery.ui.effect.js"></script>
    <script src="jquery.ui.effect-fade.js"></script>
    <script src="jquery.beeTooltip-0.1.2.min.js"></script>
                
  5. Add a title attribute to your elements
  6. Select your elements using jQuery
  7. Call .beeTooltip([options]) on them
  8. Hover your mouse over the elements and enjoy your tooltip!

You can customize the styles in the jQuery.beeTooltip.css file.

Options

The plugin provides a few options like:

JavaScript API

You can also hide and show the tooltip via JavaScript using the show() and hide() methods. You call these methods by passing the strings, "show" or "hide", respectively. A few examples are shown below:


// Shows the tooltip
$("#sample-tooltip").beeTooltip("show");

// Hides it back
$("#sample-tooltip").beeTooltip("hide");
        

Known issues

Author notes

This plugin was developed by me, Rishabh Rao. This is my first jQuery plugin and I am still learning jQuery while developing it.

This plugin is licensed under the MIT license.

Suggestions, Support and Contact

Got an issue? Feel free to raise it in Issues tab. I'll be happy to help! Got a suggestion? You're most welcome! Or just want to say, "hi!"? Ping me on Twitter at @rishabhsrao!