Jquery position of hide div

Question

I have some simple question.

Look at my code :

Demo

Discription div show when i mouse over on img. but i want to display description div at the bottom of image not in top of map.

Answer 1

Just take style="position: absolute; left: 457px; top: 228px;" over to description 2 and you are good to go.

Answer 2

I've tried to cleaned up and changed your code a little, so the first of all, the marker is at the map, and the description that belongs to the marker is just below it.

Notice that I've created a description-container, which contain the point, and the description. Furthermore, I've changed a bit in the js.

http://jsfiddle.net/9RxLM/2465/

The code looks like this:

HTML

<div class='map'>
    <div class='description-container' style="top: 200px; left: 200px;">
        <div class="hoverable">
            <img src="point.png" />
        </div>
        <div class='description'>
             <h2>taaa</h2>

            <p>descriiption</p>
        </div>
    </div>
</div>

CSS

.map{
    background: url("http://webhelp.pl/pictures/zasoby/mapka_363.png");
    width: 528px; 
    height: 495px; 
    background-repeat: no-repeat;
}

.description-container{
    position: absolute; 
    top: 200px; 
    left: 200px;
}

.description {
    display: none;
    width: 300px;
    padding: 10px;
    background: #EEEFEB;
    color: #000000;
    border: 1px solid #4D4F53;
    margin: 0px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
    box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
    position: relative;
    margin-left: -50%;
}

.description h2 {
    background-color: #4D4F53;
    color: #E3E5DD;
    font-size: 14px;
    display: block;
    width: 100%;
    margin: -10px 0px 8px -10px;
    padding: 5px 10px;
}

JS

$(".description-container .hoverable").mouseover(function () {
    $(this).parent(".description-container").find(".description").show();
}).mouseout(function () {
    $(this).parent(".description-container").find(".description").hide();
});

Hope this will help you.

Answer 3

Make the description absolutely positioned with bottom: 0

.description {
    display: none;
    width: 400px;
    padding: 10px;
    background: #EEEFEB;
    position: absolute;
    bottom: 0;
    color: #000000;
    border: 1px solid #4D4F53;
    margin: 0px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
    box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
}

Demo: Fiddle

Answer 4

Use like this

$(".description2").mouseover(function(e) {
   $(this).children(".description").css("margin-left",e.pageX);
   $(this).children(".description").css("margin-top",e.pageY);
   $(this).children(".description").show();
}).mouseout(function() {
   $(this).children(".description").hide();
})

Demo

Answer 5

Change your css like this

instead of marging : 0px use this margin-top: 375px;

Answer 6

Here is a solution with:

postion:relative

and

position:absolute;

Look at the updated fiddle.