Question

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 component? The closest library that I found is http://gristmill.github.com/jquery-popbox/ This does not work sometime, in some browser. Further search for “Popbox” does not show any useful result. Can anyone recommend 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 come with complicated code, is hard to learn for beginner.

Thank very much in advanced.

Answer 1

Check this working demo: http://jsfiddle.net/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.com/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.com/Plugins/Hovercard