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

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

1 голос
/ 08 марта 2012

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

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

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

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

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

Ответы [ 2 ]

1 голос
/ 08 марта 2012

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

.editor-field
{
 position: relative;  
}

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

1 голос
/ 08 марта 2012

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

Вы можете написать что-нибудь, чтобы сделать это довольно легко, просто используя стили с отображением: нет рядом с каждой из кнопок всплывающей подсказки. Когда кнопка нажата, переключите подсказку 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();
});
...