javascriptjquerytooltiptiptip

jQuery/Javascript Plugin best practice

I'm not particular familiar with using jQuery/Javascript so I don't know what the best way to do what I'm asking, it works but I don't know how efficient it is.

Basically I have a plugin called TipTip to create tooltips. It either takes the info from the "title" attribute of what you want the tip to appear over or you can use an option in the script to include HTML, like so:

<script type="text/javascript">
$(function(){
$(".someClass").tipTip({content:"<strong>What you want in the tooltip</strong>"; })             
});
</script>

I want to generate a lot of different tooltips on my page but they all fit a similar style and really only need a changeable variable (they are an achievement progress bar so I only need to pass a single value for the % progress).

So is it alright to simply have a lot of script tags and duplicate the code above or can I pass a variable into it somehow and only keep the one piece of tooltip code at the top?

Or is this a question for suited to the devs of TipTip? Thanks in advance.

Solution

  • Assuming HTML5 is ok to use in this scenario, I'd reccommend using the html data attributes to store your element specific tooltips... and then using it to populate the tiptip plugin...

    $(function(){
    $('.toolTipClass').each(function() {
        var element = $(this);
        element.tipTip({
            content: "<strong>"+element.data("toolTip")+"</strong>"
    });
});

    Now just add the HTML5 attribute like so

    <div class="toolTipClass" data-toolTip="This is the tool Tip">Div Content</div>