CODEWITHSUNDEEP
jquerytipsy
user1372430
user1372430

Reputation:

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?

Upvotes: 2

Views: 203

Answers (2)

Girish
Girish

Reputation: 12117

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

Upvotes: 3

Piotr Stapp
Piotr Stapp

Reputation: 19830

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.

Upvotes: 2

Related Questions