Инструменты jQuery: ошибка всплывающих подсказок с относительной позицией и переполнением: авто в родительском контейнере; пример jsfiddle; как это исправить?

Я подготовил пример jsfiddle:

http://jsfiddle.net/PEH7t/11/

Проблема в том, что у меня есть контейнер с относительной позицией (которую нельзя изменить). Я нашел параметр всплывающей подсказки relative: true, который должен решить мою проблему (он использует позицию jQuery вместо смещения для установки позиции всплывающей подсказки). Это бы работало нормально, если бы у меня не было overflow: auto (это тоже нельзя изменить). Когда вы прокручиваете контейнер, а затем нажимаете значок справки, всплывающая подсказка получает положение относительно контейнера, но не учитывает прокрутку. Это приводит к неуместным всплывающим подсказкам.

Кто-нибудь знает, как это исправить?

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


jquery css-position jquery-tools jquery-tooltip
person Michal B.    schedule 08.03.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

вы могли бы довольно легко закодировать что-нибудь, просто используя стилизованные div с display:none рядом с каждой из ваших кнопок всплывающей подсказки. Когда кнопка нажата, переключите всплывающую подсказку div. Таким образом, вы получаете полный контроль и вам не нужно обходить или впихивать существующий код.

Пример:

CSS

.someContainer
{
    position:relative;
}
._js_tooltip
{
    display:none;
    width: 300px;
    height: 100px;
    position:absolute; /*relative to container*/
    top: 10px;
    right: 10px;
}

html

<!-- your tooltips are inline, positioned however you want -->
<div class='someContainer'>
  <div class='_js_tooltip'>this is a tooltip</div>
  <div class='_js_tooltip_button'>this is the button</div>
</div>

<div class='someContainer'>
  <div class='_js_tooltip'>this is a tooltip</div>
  <div class='_js_tooltip_button'>this is the button</div>
</div>

скрипт

$('._js_tooltip_button').on('click', function(){
    $(this).siblings('._js_tooltip').toggle();
});
person totallyNotLizards    schedule 08.03.2012
comment
я пойду по этому пути, если не будет простого решения. - person Michal B.; 08.03.2012

arrow_upward
1
arrow_downward

Это потрясающе. Я часами думал над решением, и теперь меня осенило:

.editor-field
{
 position: relative;  
}

Вуаля. Бонусный вопрос остается открытым.

person Michal B.    schedule 08.03.2012
comment
Ваш ответ был бы более полезным, если бы вы рассказали нам, что делает .edit-field. - person Christian; 15.11.2012