jquerytipsy

jquery tipsy two tips in the same time


I am using jQuery Tipsy in my project. In the social media tags I want to show on the top, social media name and on the bottom, page sharing counts like this:

enter image description here

EDIT:

My links like this:

<a class="twitter tip-n tip-s" target="_blank" href="http://twitter.com/intent/tweet?text=text&url=page" title="Twitter" rel="17 tweets"></a>

And jQuery code part like this:

$('.tip-n').tipsy({fade: true, gravity: 's', html: true});
$('.tip-s').tipsy({fade: true, gravity: 'n', html: true, title: 'rel'});

Of course it did not work. I googled but I did not find anything. Could you help me?


Solution

  • As @Garath asked plugin does not support two tool tip on same element, but you can do it another way.. warp <a> element by <span> and apply another tool tip on <span> element

        <span rel="17 tweets" class="tip-s">
          <a class="twitter tip-n" target="_blank" href="http://twitter.com/intent/tweet?text=text&url=page" title="Twitter">ICON</a>
        </span>
    
       <script type="text/javascript">
        $(function(){
            $('.tip-n').tipsy({fade: true, gravity: 's', html: true});
            $('.tip-s').tipsy({fade: true, gravity: 'n', html: true, title: 'rel'})
        });
    
       </script>
    

    $(function(){
      $('.tip-n').tipsy({fade: true, gravity: 's', html: true});
      $('.tip-s').tipsy({fade: true, gravity: 'n', html: true, title: 'rel'})
    })
    <link href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
    <br/><br/><br/><br/>
    <span rel="17 tweets" class="tip-s">
    <a class="twitter tip-n" target="_blank" href="http://twitter.com/intent/tweet?text=text&url=page" title="Twitter">ICON</a>
    </span>

    Fiddle Demo