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

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

Вот как я активирую всплывающие подсказки с помощью jQuery:

$(document).ready(function() {
      $("body").tooltip({ selector: '[data-toggle=tooltip]', placement: 'bottom' })
    })

Вот как я использую его в html (или jsx):

<a className="icon-btn" onClick={ () => {
//on Click I remove this parent element and show something else
}}>
<i className="fa fa-lg fa-pencil-square" title="Edit" data-toggle="tooltip"></i>
</a>

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

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

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


javascript jquery twitter-bootstrap bootstrap-4
person B-Stewart    schedule 10.09.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

У меня была похожая проблема, и я знаю, что вопрос уже немного устарел, но я публикую свое решение, возможно, оно поможет кому-то в будущем... (Это смесь Angular-TypeScript-JQuery, но принцип тот же.)

В компоненте:

/* Toggles the Bootstrap 4 tooltip of an HTML element. */
private tooltip(elem: HTMLElement, action: string): void {
    (<any>$(elem)).tooltip("dispose");
    (<any>$(elem)).tooltip({ container: "body" });
    (<any>$(elem)).tooltip(action);
    (<any>$(elem)).tooltip("update");
}

В представлении:

<someElement data-toggle="tooltip" title="..."
  (mouseenter)="tooltip($event.target,'show')"
  (mouseleave)="tooltip($event.target,'hide')">
</someElement>

Таким образом, в основном вместо использования глобального $('[data-toggle=tooltip]').tooltip() для одновременной активации всех всплывающих подсказок — что в любом случае не сработает, если у вас есть всплывающие подсказки, не являющиеся частью DOM во время вызова этого кода, потому что страница генерируется динамически какой-либо инфраструктурой JS, например — вы прикрепляете всплывающие подсказки к элементам только тогда, когда курсор входит в них, и уничтожаете их сразу, когда он уходит.

(Параметры { container: "body" } и "update" предназначены только для предотвращения ">такие проблемы с позиционированием для более сложных макетов.)

person tom    schedule 21.01.2018
comment
Отмечая это как ответ, хотя реальный ответ как на вопрос, так и на ответ заключается в том, чтобы не смешивать jQuery с другими потоками внешней среды, поскольку существуют конфликтующие проблемы, подобные этой, которые возникают в отношении обработки с dom. - person B-Stewart; 11.08.2020
comment
Проблема не имеет ничего общего с смешиванием фреймворков. Вот пример с той же проблемой, но без использования других фреймворков, кроме Bootstrap. jsfiddle.net/zephyrprime/9oap4scL/9 - person Jason Cheng; 21.01.2021
comment
Это не работает, если курсор никогда не покидает элемент, а элемент удаляется, пока курсор все еще находится над элементом. Именно с такой ситуацией я работаю. Нажимается кнопка, и та же кнопка удаляется, но всплывающая подсказка остается. - person Jason Cheng; 27.01.2021

arrow_upward

arrow_downward

person    schedule
comment
Метод «удалить» не исчезнет, ​​как метод «скрыть», если вы хотите удалить всплывающую подсказку без исчезновения. - person Andrew Schultz; 31.08.2018
comment
Это не работает, потому что после удаления элемента из dom $('.tooltip') ничего не возвращает. - person Jason Cheng; 27.01.2021
comment
@JasonCheng, мое решение состояло в том, чтобы удалить всплывающую подсказку до того, как элемент будет удален из дома. Возможно, не во всех случаях, но обязательно в других. - person Ben; 11.04.2021