jQuery Tipsy: Simple Overwriting Solution?

Question

How can I change the direction from "n" to "w" without losing the test text and without cloning it?

$(".tipsy").live('mouseover',function() {
    $(this).tipsy({gravity: "n", html: true});
    $(this).tipsy("show");
});

$(".tipsy").live("click",function() {
    $('.tipsy').remove();
    $(this).tipsy({gravity: 'w', html: true});
    $(this).tipsy("show");
});

<div class="tipsy" title='<u>test link</u>'>TestTestTestTestTestTestTestTestTestTestTest</div>

Here's a fiddle: http://jsfiddle.net/nQvmw/23/

gion_13 · Accepted Answer · 2012-03-30T15:43:27.280

2

As seen in the tipsy plugin homepage, you can pass a function that returns a direction as your gravity option :

$(el).tipsy({gravity: function(){return Math.random()>.5 ? 'w' : 'n';}

Based on this feature, you could easily make a function that returns different directions for different mouse actions (mouseenter,click...) :

var flag = false;
function gravity(){
    return flag ? 'n' : 'w';
};

$(".tipsy")
    .live('mouseover',function(){
        flag = true;
        $(this).tipsy("show");
    })
    .live("click",function() {
        flag = false;
        $(this).tipsy("show");
    })
    .tipsy({
        gravity: gravity,
        html: true
    });

Here's the working demo

edited Mar 30 '12 at 15:43

answered Mar 30 '12 at 15:22

gion_13

41,171
10
96
108

thanks for the quick response. It seems to be working fine except it goes back to the n gravity on mouseover after a click. How can it stay on the w gravity after a click? I also tried the same function but for html and it didn't work. Any idea how to get it to work? Here's the fiddle: [link](http://jsfiddle.net/nQvmw/27/) I'll accept your answer asap with the bounty. Thanks for the help gion_13! – Maverick Mar 30 '12 at 15:48
@Maverick Is this (http://jsfiddle.net/nQvmw/28) what you want? After a click it always keeps the `w` gravity. – gion_13 Mar 30 '12 at 15:51
now the gravity is working, but do you see the html attribute on the very bottom. If you set it to false (or remove it) it will show the text (showing the u tags) this should be the mouseover behavior before click, html: false. On click and subsequent mouseovers, it should actually underline the text, so html: true. I tried it with the flagging mechanism by assigning an html function but it's not working. – Maverick Mar 30 '12 at 16:05
Now I understand what your problem was. You should use a function to determine the actual tipsy output. You achieve this by passing a function as the the `title` option at initialisation : `$(el).tipsy({title:function(){return Math.random()>.5?'a title':'another title'}})`. By using this mechanism, you can dynamically update the contents of the tip based on your flag. Here's a working copy : http://jsfiddle.net/nQvmw/29/ .I recommend you read a bit more on this plugin, because all the needed info is right there under your nose :P – gion_13 Mar 31 '12 at 06:28
http://jsfiddle.net/nQvmw/30/ I'm sorry to post back but you seem to understand this problem. I've been on it over 8 hours today and still breaking my head, probably real simple for you. There is an extra option called hoverlock to keep the tip open on hover. If hoverlock is false, tip does not stay open for you to hover on it, if hoverlock is true, you can hover on the tip. I created a function hvr() which returns true and false correctly as seen in the alerts, but the value never gets overwritten in the tipsy options which is driving me crazy. Please help me figure this last part out – Maverick Apr 02 '12 at 01:28
Would you be able to help if I open this as a new question gion? – Maverick Apr 05 '12 at 14:34
jsfiddle.net/nQvmw/31 the hoverlock has an issue. On the very bottom of the script area I added 'hoverlock: true' On mouse over before click, it should be false, after click, it should be true. I can post it as a new question if you want, let me know what you prefer gion – Maverick Apr 05 '12 at 16:13
do you know a possible solution? I can open another bounty – Maverick Apr 12 '12 at 19:16
See if this works for you : http://jsfiddle.net/nQvmw/36/ . I've retricted tipsy to be triggered only manual (by providing `trigger : 'manual'`). This way you have more control on the element and you can decide (with the `hvr` function) when you show the tip. Tell me if this is what you were trying to do. – gion_13 Apr 14 '12 at 12:21
hmm.. still not working. What I'm trying to do seems simple but it's still not working. if you mouseover, hoverlock should be false, if you click/mouseover after click, hoverlock should be true. Does that make sense? – Maverick Apr 18 '12 at 20:45

jQuery Tipsy: Simple Overwriting Solution?

1 Answers1

Here's the working demo

Linked