Как сделать div-палку другому элементу

Question

Я делаю систему голосования. Когда пользователь нажимает на ссылку с классом «голосовать», поле для голосования появляется только по ссылке с кликом. Похоже, что это на данный момент:

Моя проблема заключается в том, что если страница прокручивается то окно голосование не отрегулированы. Я хочу, чтобы он всегда отображался чуть ниже ссылки и придерживался ссылки даже при прокрутке страницы.

Мой контейнер стилизовано как это:

#vote_container { 
    position: fixed; 
    height: 82px; 
    min-height: 83px; 
    background-color: #e7edf3; 
    border: 3px solid #d3d6d8; 
    border-radius: 10px; 
    left: 40%; 
    margin-top: 6px;  
    padding: 10px;  
    text-align: left; 
    top: 60%; 
    z-index: 199;  
} 

И это код, я использую, чтобы поместить контейнер:

var pos = $(this).offset(); 
var width = $(this).width();   
$("#vote_container").css({ "left": (pos.left - 16) + "px", "top": (pos.top + 28) + "px" }); 

Ive даже создал simplified example на jsFiddle.

Answer 1

Изменяет ли положение #vote_container абсолютное решение проблемы? http://jsfiddle.net/xkNqG/9/

EDIT: Кроме того, в CSS, я добавил display:none и в функции добавлены $ ('#') vote_container шоу()

Answer 2

#vote_container не должен быть «позицией: исправлено», поскольку ngen говорит, что вместо него должно быть «position: absolute» here is my fiddle Я упростил ваш css (для временных целей), чтобы помочь добраться до корня проблемы и добавить больше текст, чтобы скрипка фактически продемонстрировала проблему с прокруткой.

Answer 3

Если вы хотите чистое решение CSS попробовать это..

CSS

.tipLink{ 
    color:#33f; 
    cursor:pointer; 
    position:relative; 
} 
.tip{ 
    position:absolute; 
    display:none; 
    top:80%; 
    left:110%; 
    background-color:#dddddd; 
    border:1px solid black; 
    width:100px; 
    color:black; 
    z-index:20; 
    padding:3px; 
    -webkit-border-radius:5px 5px 5px 5px; 
    -moz-border-radius:5px 5px 5px 5px; 
    border-radius:5px 5px 5px 5px; 
    text-align:center; 
} 
.tipLink:hover .tip{ 
    display:block; 
} 

HTML

<span class="tipLink"> 
    Mouse Over Me 
    <span class="tip">Hello World</span> 
</span> 

Вам придется укладывать внутренний поверочного тег дизайна вам нужно, но это должно работать.

Answer 4

Почему вы не используете плагин jQuery tooltip, http://bassistance.de/jquery-plugins/jquery-plugin-tooltip, и улучшайте его, ставя его так, как хотите. Он уже обрабатывает позиционирование и может содержать текст или разметку.