Как убрать всплывающую подсказку при наведении на внутренний объект? - PullRequest
Новая
       57

Как убрать всплывающую подсказку при наведении на внутренний объект?

0 голосов
/ 17 октября 2018

У меня есть внешний div с изображением внутри, у обоих есть всплывающие подсказки.Нажатие любого элемента выполняет другое действие:

  • Нажатие на внешнюю div, выбирает изображение.
  • Щелчок по внутреннему img открывает изображение.

Я бы хотел дифференцировать действия, поэтому при наведении изображения внешняя подсказка не отображается.

enter image description here

Вот HTML: 

<div class="outer-tip"  title="SELECT image"  data-toggle="tooltip">
  <a class="inner-tip"  title="OPEN image"    data-toggle="tooltip">
    <img src="...">
  </a>
</div>

  1. Вот FIDDLE без попыток исправить это: https://jsfiddle.net/qmskzah6/

  2. Здесь я пытаюсь использовать z-index: https://jsfiddle.net/qmskzah6/1/

  3. Вот куда я двигаюсьизображение за пределами div: https://jsfiddle.net/qmskzah6/2/

3 - самое близкое к тому, что я хочу, но если вы добавите больше изображений, оно будет дергаться, как показано здесь: https://jsfiddle.net/qmskzah6/3/

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

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Поскольку кажется, что «встроенного» параметра нет, я чувствовал себя лучше при создании индивидуального решения: 

$( '[data-toggle="tooltip"] [data-toggle="tooltip"]' ).hover( 
    e => { // mouseIn
        var t = $( e.target ).parents( '[data-toggle="tooltip"]' ).siblings('.tooltip');
        if( t.is( ':visible' ) )
            t.hide(  );
    }, 
    e => { // mouseOut
        var t = $( e.target ).parents( '[data-toggle="tooltip"]' ).siblings('.tooltip');
        if( t.is( ':hidden' ) )
            t.show(  );
    }
);

Я постараюсь построчно объяснить и объяснитьрешение: 

$( '[data-toggle="tooltip"] [data-toggle="tooltip"]...

1.Этот селектор гарантирует, что мы нацелены только на вложенные всплывающие подсказки. 

e => { // mouseIn

2.Нам нужны разные функции для событий входа и выхода мыши.Возможно, есть более эффективный способ сделать это, но я думаю, что это способствует удобочитаемости. 

var t = $( e.target ).parents...

3.Первоначально я только что выполнил показ / скрытие для этого родительского элемента, но у него был побочный эффект: перемещение от внутреннего элемента с чрезмерным наклоном назад к внешнему заставляло всплывающую подсказку только один раз мигать, а затем снова скрывалось до следующего наведения,Я создал t var, поскольку он будет использоваться более одного раза. 

if( t.is( ':visible' ) )

4.Регистрация событий mouseIn / Out показала, что они вызывались 3 раза за одно событие.Я не уверен, почему это произошло, но добавив проверку, чтобы убедиться, что она была скрыта / видима, - прежде чем полностью изменить ее - исправил проблему.

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

0 голосов
/ 17 октября 2018

Используйте параметр container ... 

$('[data-toggle="tooltip"]').tooltip({container:'.outer-tip'});

И затем добавьте CSS, чтобы скрыть внешнюю подсказку при наведении внутренней. 

.inner-tip:hover + .tooltip {
   display:none !important;
}

https://www.codeply.com/go/eJOvE5qRdU

...