jquery tipsy two tips in the same time

Question

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?

Similar to Girish's answer below - http://jsfiddle.net/4wcsatLn/ — TimSPQR, Aug 27 '14 at 07:01

Girish · Accepted Answer · 2014-09-17T18:47:05.433

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

Thank you very much. This must be the difference between looking and seeing. Really cool solution. — , Aug 27 '14 at 08:03

score 2 · Answer 2 · answered Aug 27 '14 at 06:44

I check the tipsy source code and it is impossible without changes in original code :)

The change could be done in show and enter function. In my opinion you should create method showN witch will show text above your element (hardcode in it north position), and analogical showS. In enter method just call both and you will be done.

jquery tipsy two tips in the same time

2 Answers2