javascript - Popup Div anchor at mouse hoverclick - Stack Overflow

admin管理员组

文章数量:1406348

I am new in Web Programming.

I want to implement something like in facebook, when we hover our mouse on the link, a arrow-floating-div that anchor on the link will be showed on top of it.

How do you all address that kind of ponent? The closest library that I found is / This does not work sometime, in some browser. Further search for "Popbox" does not show any useful result. Can anyone remend any similar library like the link I posted? It can be using Jquery, Javascript, CSS, html or etc.

Instead of using library, can anyone show me how to do it without using library, in a simplest of way. I just want to know the rough idea behind. Most of the library e with plicated code, is hard to learn for beginner.

Thank very much in advanced.

I am new in Web Programming.

I want to implement something like in facebook, when we hover our mouse on the link, a arrow-floating-div that anchor on the link will be showed on top of it.

How do you all address that kind of ponent? The closest library that I found is http://gristmill.github./jquery-popbox/ This does not work sometime, in some browser. Further search for "Popbox" does not show any useful result. Can anyone remend any similar library like the link I posted? It can be using Jquery, Javascript, CSS, html or etc.

Instead of using library, can anyone show me how to do it without using library, in a simplest of way. I just want to know the rough idea behind. Most of the library e with plicated code, is hard to learn for beginner.

Thank very much in advanced.

• javascript
• jquery
• html
• css
• web-applications

Share Improve this question Follow asked Nov 19, 2012 at 9:37 Sam YCSam YC 11.7k2222 gold badges111111 silver badges164164 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Check this working demo: http://jsfiddle/fedmich/Aapw6/

You'll need to create an image of the arrow on top and centered in the popup box and then generally move the popup box to follow the target anchor.

$('.hover').hover(function(){
        var popup_div = $('.popup_div');
        var obj = $(this);
        var offset = obj.offset();

        var new_top = offset.top + 30;

        var new_left = offset.left;

        new_left = new_left - ( popup_div.width() / 2);
        new_left = new_left + ( obj.width() / 2);

        popup_div.css('left', new_left + 'px');
        popup_div.css('top', new_top + 'px');

        popup_div.show();
    }
    , function (){
        //hovered away so hide popup
        $('.popup_div').hide();
    }
    );

CSS code should be position absolute

.popup_div{
    position:absolute;
    left:100px;
    top:100px;
    border:1px solid red;
    background-color:blue;
    width:150px;
    height:150px;
    background:url("http://i.imgur./zFWft.png") no-repeat scroll center 0 transparent;
    text-align:left;
}

---

you could do this via getting the positioning of the target div and then getting the center by dividing the width by half and adding it to the left.

    new_left =  hovered_thing.left + (hovered_thing.width / 2) - (popup_div.width / 2)

let me make you some fiddle for this shortly on another note though, have you tried hovercards? might be similar to what you want to do

http://designwithpc./Plugins/Hovercard

jquery ui provides a dialog feature

the idea behind it that you have your anchor bind that it displays and hides you popup

$('#anchor').bind({
    'mouseenter' : function() {
        $('#popUp').show();
    },
    'mouseleave' : function() {
        $('#popUp').hide();
    }
});

you will have to set the position of the popup to. note that only if the popup divs display is not none you can use $('#popup').outerWidth()/2 and $('#anchor').outerWidth() /2 ...

本文标签： javascriptPopup Div anchor at mouse hoverclickStack Overflow