Подсказка для инструментов jQuery, позиция с абсолютом и полем - PullRequest
Новая
       37

Подсказка для инструментов jQuery, позиция с абсолютом и полем

1 голос
/ 02 декабря 2011

Я использую плагин jquery: Tools.tooltip () Похоже, что позиционирование действительно является проблемой.

Когда всплывающая подсказка помещается в некоторый контейнер с позицией: absolute, вам нужно добавить relative:true в словарь conf, чтобы подсказки располагались правильно.

Теперь проблема в том, что: если у вас есть как position:absolute оболочка, так и триггеры всплывающих подсказок с полем, позиция будет испорчена 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
<style>
.trigger
{
    width:100px;
    height:40px;
    background-color:red;
    margin:5px;
    position:relative;
}
.tooltip 
{
    display:none;
    color:white;
    background-color:#333;
    padding:10px;
    border-radius:3px;
}
</style>
<div class='wrapper' style='position:absolute;left:100px;top:100px'>
    <div class='trigger' style='margin-top:100px;margin-left:100px'>
        hover to see the tooltip
    </div>
    <div class='tooltip'>
        The awesome tooltip
    </div>
</div>

<script type='text/javascript'>
    $('.trigger').tooltip({
        position:'bottom center',
        relative:true,
    });
</script>

Подсказка должна отображаться под триггером и центрироваться в этом случае. Но если навести курсор на триггер (красное поле), всплывающая подсказка (серая рамка) отображается в этой позиции:

enter image description here

Как будто поле полностью игнорируется. Кроме того, если я не использую поле вообще (только с оберткой position: absolute и используетlative: true в conf), всплывающая подсказка по-прежнему отображается в странной позиции:

enter image description here

Всплывающая подсказка находится немного влево и вверх по сравнению с правильной позицией, о которой я понятия не имею.

Как я могу решить эту проблему? Большое спасибо! :)

Ответы [ 2 ]

2 голосов
/ 05 декабря 2011

Так что, если кто-то хочет использовать подсказку инструмента jQuery:

  • Если всплывающая подсказка находится в «положении: абсолютный» или «Положение: фиксированный» контейнер, поставка «Относительно: истина» с INI конфигурации.
  • В этом случае не добавляйте поля для триггера всплывающей подсказки
1 голос
/ 05 декабря 2011

Я сделал вам небольшую скрипку, которая "kindda" решает вашу проблему.

В этой скрипке подсказка получает места под вашим триггером, но для ее получения требуется х число "зависаний"100% правильно размещены.Я думаю, что это вызвано некоторой (mal) функцией в библиотеке всплывающих подсказок.

Вот скрипка: http://jsfiddle.net/Gjw74/1/

И модифицированный JavaScript: 

$('.trigger').tooltip({
    position:'bottom center',
    relative:true,
    onShow: function(){
        var $trigger = this.getTrigger();
        this.getTip().css({
            'margin-top' : $trigger.css('margin-top'),
            'margin-left' : $trigger.css('margin-left') 
        });
    }
 });
...