我在我的网页上设置了引导工具提示。当您滚动图像时，工具提示会出现，在工具提示中我有一个链接，当我滚动实际的工具提示以单击链接时……它会消失。
我的问题（奇怪的是，我似乎无法在任何地方找到答案）是当我将鼠标悬停在实际工具提示本身上时，如何让工具提示保持打开状态。
我已经看到并尝试了一些可以设置延迟的解决方案，但我不想朝那个方向前进，因为我不喜欢那种效果。
任何帮助都会很棒，谢谢！
var originalLeave = $.fn.tooltip.Constructor.prototype.leave;
$.fn.tooltip.Constructor.prototype.leave = function(obj){
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
var container, timeout;
originalLeave.call(this, obj);
if(obj.currentTarget) {
container = $(obj.currentTarget).siblings('.tooltip')
timeout = self.timeout;
container.one('mouseenter', function(){
//We entered the actual popover – call off the dogs
clearTimeout(timeout);
//Let's monitor popover content instead
container.one('mouseleave', function(){
$.fn.tooltip.Constructor.prototype.leave.call(self, self);
});
})
}
};
$('body').tooltip({ selector: '[data-toggle]', trigger: 'click hover', placement: 'bottom auto', delay: {show: 50, hide: 400}});
我是这样做的
我在链接上触发工具提示 - 所以必须将 a 替换为相关元素：
初始化工具提示：
$(document).ready(function() {
$('a').tooltip();
})
在鼠标悬停时保持工具提示打开 + 在第一次鼠标悬停时添加一个帮助程序类（在我的情况下，工具提示总是触发两个鼠标悬停事件 - 所以我必须确保只在第一次添加 .active）
$(document).on('mouseover','.tooltip', function() {
var tooltipTrigger = $('a[aria-describedby="' + $(this).attr('id') + '"');
if(! $(tooltipTrigger).hasClass('active')) {
$(tooltipTrigger).tooltip('show').addClass('active');
}
});
mouseout 时隐藏相应的tooltip...这里使用tooltip-inner 来触发，因为tooltip 的小箭头，仍然属于.tooltip，可能导致你可能会用光标，但还不够远，然后工具提示保持打开状态...
$(document).on('mouseout','.tooltip-inner', function() {
$('a.active').tooltip('hide').removeClass('active');
});
我的方式
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip({
trigger: "manual"
});
$('body').on('mouseleave', '.tooltip', function () {
$('[data-toggle="tooltip"]').tooltip('hide');
});
$('[data-toggle="tooltip"] > i').on('mouseenter', function () {
$('[data-toggle="tooltip"]').tooltip('show');
});
$('[data-toggle="tooltip"]').on('click', function () {
$(this).tooltip('show');
}); });
$(document).ready(function(){
$(document).on("mouseover", "#myLink", (event) => {
$(event.target).tooltip(
{
trigger: 'manual',
delay: { "hide": 500 }
}).tooltip("show");
});
var isOver = false;
$(document).on("mouseleave", "#myLink", (event) => {
setTimeout(function () { }, 1000);
if (!isOver)
setTimeout(function () { $('#myLink').tooltip('hide'); }, 500);
});
$(document).on("mouseover", ".tooltip", (event) => {
isOver = true;
});
$(document).on("mouseleave", ".tooltip", (event) => {
setTimeout(function () { $('#myLink').tooltip('hide'); }, 500);
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<a href="#" id="myLink" data-toggle="tooltip" title="Stay over me!">Hover over me</a>
</body>
</html>这对我有用：
$('[data-toggle="tooltip"]').tooltip({
trigger: "manual"
});
$('[data-toggle="tooltip"]').on('mouseleave', function () {
$(this).tooltip('hide');
});
$('[data-toggle="tooltip"]').on('mouseenter', function () {
$(this).tooltip('show');
});
$('[data-toggle="tooltip"]').on('click', function () {
$(this).tooltip('hide');
});
试试这个。这可能会有所帮助。
tooltip-trigger="focus manual"
let tooltipTimer = false;
let isTooltipOpen = false;
let tooltipDelay = 100;
$(document).on('mouseover', '[data-bs-toggle=tooltip]', function(e) {
$('.tooltip').tooltip('hide');
$(e.currentTarget).tooltip({
'trigger': 'manual',
'html': true
}).tooltip('show');
});
$(document).on('mouseleave', '[data-bs-toggle=tooltip]', function(e) {
if (!isTooltipOpen) {
tooltipTimer = setTimeout(function () {
$(e.currentTarget).tooltip('hide');
}, tooltipDelay);
}
});
$(document).on('mouseover', '.tooltip', function() {
clearTooltipTimeout();
isTooltipOpen = true;
});
$(document).on('mouseleave', '.tooltip', function(e) {
tooltipTimer = setTimeout(function () {
$(e.currentTarget).tooltip('hide');
}, tooltipDelay);
isTooltipOpen = false;
});
function clearTooltipTimeout()
{
if (tooltipTimer)
{
window.clearTimeout(tooltipTimer);
tooltipTimer = false;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<a data-bs-toggle="tooltip" title="Tooltip open on hover!">Tooltip</a>
</body>
</html>