Pass options through data- attributes

Hi,

I love the plugin and started using it in my project, but I have to use wrap it’s usage in another plugin.

/**!
     * Tooltips
     * Wraps the call to load jquery.tooltipster.js
     * so that we can pass special configs on a case by case basis
     */
    $.fn.tooltips = function() {
        // To chain body plugins
        return this.each(function() {

            $('.tooltip').each(function(){
                var $el = $(this);

                $el.tooltipster({
                    speed:          $el.data('tooltipspeed') || 0,
                    position:       $el.data('tooltipposition') || 'top',
                    trigger:        $el.data('tooltiptrigger') || 'hover',
                    contentAsHTML:  $el.data('tooltiphtml') || false,
                    interactive:    $el.data('tooltipinteractive') || false,
                    delay:          0,
                    theme:          'tooltipster-light'
                });
            });

        });
    };

Any plans to allow setting options through data attributes so they can be set on a case by case basis? Thanks

[louisameline]

Although this will not be included in Tootlipster directly, there is nothing easier than to implement it. I’ve even included an example of it in the documentation of V4 (on the v4 branch) and it will also be available as a plugin for Tooltipster. Here is the snippet for V4:

// HTML: <span class="tooltip" data-tooltipster='{"side":"left","animation":"slide"}'></span>

$('.tooltip').tooltipster({
    functionInit: function(instance, helper){

        var $origin = $(helper.origin),
            dataOptions = $origin.attr('data-tooltipster');

        if(dataOptions){

            dataOptions = JSON.parse(dataOptions);

            $.each(dataOptions, function(name, option){
                instance.option(name, option);
            });
        }
    }
});

and for v3 (not tested, let me know if it’s ok):

$('.tooltip').tooltipster({
    functionInit: function(origin)
        var dataOptions = origin.attr('data-tooltipster');

        if(dataOptions){

            dataOptions = JSON.parse(dataOptions);

            $.each(dataOptions, function(name, option){
                origin.tooltipster('option', name, option);
            });
        }
    }
});

[mplattner]

+1

Do you know a good alternative tooltip plugin with this feature?