Как сохранить всплывающую подсказку bootstrap4 при наведении курсора на саму подсказку?

Question

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

Мне удалосьвроде выполнить то, что мне нужно, используя задержку на всплывающей подсказке.Он остается видимым в течение 1 секунды после перемещения мыши от моей ссылки:

    $(function () {
        $('[data-toggle="tooltip"]').tooltip({delay: {show: 0, hide: 1000}});
    });

Fiddle: https://jsfiddle.net/16gnysbp/

Любая помощь очень ценится.Спасибо!

Answer 1

Вы можете обезопасить всплывающую подсказку и предотвратить hide(), если мышь находится внутри самой подсказки.Самое сложное - следить за мышью и быть уверенным, что подсказка скрыта, когда мышь больше не наводит подсказку.Вот небольшая демонстрация:

var cx, cy, tip, waiting;
var old_hide = bootstrap.Tooltip.prototype.hide

var isOutside = function() {
  return ((cx < tip.left || cx > tip.left + tip.width) || 
          (cy < tip.top || cy > tip.top + tip.height))
}

document.addEventListener('mousemove', function(e) {
  cx = e.clientX
  cy = e.clientY
  if (waiting && isOutside()) {
    waiting.f.call(waiting.context)
    waiting = null
  } 
})

bootstrap.Tooltip.prototype.hide = function() {
  tip = this.getTipElement().getBoundingClientRect()
  if (isOutside()) {
    old_hide.call(this)
  } else {
    waiting = { f: old_hide, context: this }
  }
}

раздвоенная скрипка -> https://jsfiddle.net/vjkc0res/

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

Answer 2

Может быть, Popover будет лучшим способом для достижения вашей цели.

В моем примере я обернул кнопку в промежуток, и при наведении курсора кнопка становится сфокусированной. Чтобы предотвратить исчезновение всплывающих окон, добавьте data-triger="focus" к кнопке.

JSFiddle

EDIT: Я вижу, что вы действительно хотите иметь возможность скопировать текст, это работало на меня, но когда я перезагружал его, он остановился ... странно. Вероятно, это не тот способ, которым вы должны делать это , однако я установил для атрибута data-trigger значение manual, чтобы вы могли полностью контролировать show и hide. Когда появится всплывающее окно, появится кнопка, чтобы пользователь мог ее закрыть.