Creating a dynamic jquery tooltip

Question

I make a jquery tooltip but have problem with it, when mouse enter on linke "ToolTip" box tooltip don't show in next to link "ToolTip" it show in above linke "ToolTip" , how can set it?

Demo: http://jsfiddle.net/uUwuD/1/

function setOffset(ele, e) {
    $(ele).prev().css({
        right: ($(window).width() - e.pageX) + 10,
        top: ($(window).height() - e.pageY),
        opacity: 1
    }).show();
}

function tool_tip() {
    $('.tool_tip .tooltip_hover').mouseenter(function (e) {
        setOffset(this, e);
    }).mousemove(function (e) {
        setOffset(this, e);
    }).mouseout(function () {
        $(this).prev().fadeOut();
    });
}
tool_tip();

Would you please be able to clarify the question? What do you want the tooltip to do? — Christian
– Christian, Commented Oct 19, 2011 at 11:25
Please see here my example: jsfiddle.net/uUwuD/1 tooltip box it is as: img4up.com/up2/06331814381620909499.gif but i want as: img4up.com/up2/77297140490196263570.gif . how can fix if? — Jennifer Anthony
– Jennifer Anthony, Commented Oct 19, 2011 at 11:38

Christian · Accepted Answer · 2011-10-19 11:53:58Z

1

Something like this works, you've still got a bug where the tooltip sometimes fades away on the hover of a new anchor. I'll leave you to fix that, or for another question.

function setOffset(ele, e) {
    var tooltip = $(ele).prev();
    var element = $(ele);
    tooltip.css({
        left: element.offset().left - element.width() - tooltip.width(),
        top: element.offset().top - tooltip.height(),
        opacity: 1
    }).show();
}

And here's the jsFiddle for it: http://jsfiddle.net/uUwuD/4/

answered Oct 19, 2011 at 11:53

Christian

19.8k3 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bill the Lizard · Accepted Answer · 2012-01-28 14:21:05Z

0

you need to calculate the window width and minus it with the width of your tooltip and offset

 if(winwidth - (offset *2) >= tooltipwidth  + e.pageX){
                            leftpos = e.pageX+offset;
                    } else{
                        leftpos = winwidth-tooltipwidth-offset;
                    }

if you want more detail please refer :)

edited Jan 28, 2012 at 14:21

Bill the Lizard

407k213 gold badges579 silver badges892 bronze badges

answered Jan 28, 2012 at 5:54

sree

4984 silver badges19 bronze badges

Collectives™ on Stack Overflow

Creating a dynamic jquery tooltip

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related