How to write a jquery hover tooltip plugin step by step

How to write a jquery hover tooltip plugin step by step?

In this tutorial we are going to create a tooltip with jQuery. The idea is to have some elements that show a tool tip when hovering over them.

We will use create a tooltip using jquery directly, then write a jquery plugin for comparison.

Create a tooltip using jquery directly.

To write a jquery plugin, First,Let's implement its functions using jquery directly.

Build the html struct

Try now

Create the tooltip element using jquery.

  1. remove the _jTips element from html and create it with jquery ,instead.

  2. get the tooltip content from  triggered element's data attribute.

  3. when triggered element is hover in ,append the tooltip content element to body.

  4. set the element position.

Try now

Migrate to a plugin

  1. Create the plugin with a unique name
    create a Class to store the hovered elements and tooltip' informations.
    make sure to return the object.

function jphToolTip($elem){
    this.$elem = $elem; // hovered element
    this.$tooltip = null; // tooltip element
    return this;
}
  1. prototype jphToolTip function to add some methods which are share by all jphToolTip object.
    Migrate the procedures from previously written code

// $(this).hover(
//     function (e) {
//         var $tip = $('<div class="_jTips_holder _jTips_blue" id="_jTips"></div>');
//         $('body').append($tip);
//         var $data = $ele.data('tip');
//         $data = $data?$data:'hover me';
//         $tip.html($data);
//         $tip.css({ position: 'absolute',left: e.clientX+ 'px',top: e.clientY+'px' });
//     },
//     function () {
//         var $tip = $('#_jTips');
//         $tip.remove();
// });
jphToolTip.prototype = {
    run : function(){
        var _jphToolTip_ = this;
        if(_jphToolTip_.$tooltip) return _jphToolTip_.$tooltip; // prevent hover many times when user call jphToolTip.run() many times.
        _jphToolTip_.$tooltip=$('<div class="_jTips_holder _jTips_blue" id="_jTips"></div>');
        $(_jphToolTip_.$elem).hover(
            function (e) {
                $('body').append(_jphToolTip_.$tooltip);
                var $data = $(this).attr('title')||$(this).data('tip');
                $data = $data?$data:'Pls set the title  or data-tip atrribute!';
                _jphToolTip_.$tooltip.html($data);
                _jphToolTip_.$tooltip.css({ position: 'absolute',left: e.clientX+ 'px',top: e.clientY+'px' });
            },
            function () {
                var $tooltip = $('#_jTips');
                $tooltip.remove();
        });
    }
}
  1. extend to jQuery.fn as a plugin
    When use call the method $selector.jphToolTip(), The function jQuery.fn.jphToolTip() will be called actually.

$.fn.jphToolTip = function(options){
    // for each selected element
    // use return to keep the method chaining
    return this.each(function(){
        var $elem = $(this);
        var _jphToolTip_ = new jphToolTip($elem);
        _jphToolTip_.run();
    });
}
  1. Test our tooltip plugin
    include the new plugin js file,then call jphToolTip method.

$("#testID").jphToolTip();
$(".testClass").jphToolTip();

Try now

  1. Allow user to use customized options

  • add a default options object

$.fn.jphToolTip.defaultOptions = {
    theme : 'blue',
}
  • modify jphToolTip function

function jphToolTip(options,$elem){
    this.options= options; // add options
    this.$elem = $elem; 
    this.$tooltip = null;
    return this;
}
  • modify plugin function jphToolTip

$.fn.jphToolTip = function(options){
    return this.each(function(){
        var $elem = $(this);
        // merge the options
        var _options_ = $.extend({}, $.fn.jphToolTip.defaultOptions, options || {});
        var _jphToolTip_ = new jphToolTip(_options_,$elem);
        _jphToolTip_.run();
    });
}
  • modify the plugin's prototype
    _jphToolTip_.$tooltip=$('<div class="_jTips_holder _jTips_blue" id="_jTips"></div>');

_jphToolTip_.$tooltip=$('<div class="_jTips_holder _jTips_"'+_jphToolTip_.options.theme+' id="_jTips"></div>');

  1. Optimization. Split the main features into different logic unit.

jphToolTip.prototype = {
    run : function(){
        var _jphToolTip_ = this;
        if(_jphToolTip_.$tooltip) return _jphToolTip_.$tooltip; // prevent hover many times when user call jphToolTip.run() many times.
        _jphToolTip_.$tooltip=$('<div class="_jTips_holder _jTips_blue" id="_jTips"></div>');
        $(_jphToolTip_.$elem).hover(
            function (e) {
                $('body').append(_jphToolTip_.$tooltip);
                _jphToolTip_.setText();
                _jphToolTip_.setTheme(_jphToolTip_.options.theme);
                _jphToolTip_.setPosition(e.clientX,e.clientY);
            },
            function () {
                var $tooltip = $('#_jTips');
                $tooltip.remove();
        });
    },
    setText: function(){
        var $data = this.$elem.attr('title')||this.$elem.data('tip');
        $data = $data?$data:'Pls set the title  or data-tip atrribute!';
        this.$tooltip.html($data);
    },
    setTheme: function(theme){
        this.options.theme = theme;
        this.$tooltip.attr('class','_jTips_holder _jTips_'+theme);
    },
    setPosition: function(x,y){
        this.$tooltip.css({ position: 'absolute',left: x+ 'px',top: y+'px' });
    }
}
  1. Use the plugin again and test

$(function(){
    $("#testID").jphToolTip();
    $(".testClass").jphToolTip({theme:'red'});
    $(".website").jphToolTip({theme:'green'});
});
  1. Put all code into the closure to prevent variable be contaminated by other plugin.

(function($){
    // all code here
})(jQuery);

Conclusion

You can add more features to this plugin to make it more stronger and powerful.
Try now

date2019-05-08 15:52:39 From:www.jquerypluginhub.com Author:JPH
Related Tags:
Comments

Leave a Reply

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