Javascript 允许将鼠标悬停在工具提示/弹出框上

我有一个问题，必须打开弹出窗口/工具提示中的链接。将鼠标悬停在其上即可工作，并显示popover。但是当我离开图像时，popover消失了（很明显）。我试过使用mouseenter和mouseleave，但失败了

$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。popover({
容器：'主体'，
是的，
位置：'底部'，
触发器：“悬停”，
内容：函数（）{
返回`
虚拟文本
`
}
});
$（'[data toggle=“popover”]'）。绑定({
鼠标悬停：函数（）{
清除间隔（超时ID）；
$（'[data toggle=“popover”]'）。show（）；
},
mouseleave:function（）{
timeoutId=setTimeout（函数（）{
$（'[data toggle=“popover”]'）。隐藏（）；
}, 1000);
}
});
});
p.description{
字体大小：0.7rem；
颜色：黑色；
页边距底部：0；
}
波弗先生{
顶部：40px！重要；
}
俯卧撑{
垫底：5px；
垫面：5px；
}
h5{
字号：1rem；
颜色：白色；
}
海报{
不透明度：1.0；
&：悬停{
不透明度：0.5；
转换：所有.2易入易出；
}
}
您应该将popuver
触发器
模式设置为
手动
，并定义
mouseenter
和
mouseleave
事件，以使popuver在悬停时保持活动状态，并应用隐藏延迟以防止突然消失

我提供了一个有效的例子


$（'[data toggle=“popover”]'）。popover（{
触发器：“手动”，
是的，
位置：'底部'，
内容：函数（）{
返回`
虚拟文本
`
}
})
.on（“mouseenter”，函数（）{
var_this=这个；
$（此）.popover（“显示”）；
$（“.popover”）.on（“mouseleave”，函数（）{
$（_this.popover（'hide'）；
});
}).on（“mouseleave”，函数（）{
var_this=这个；
setTimeout（函数（）{
如果（！$（“.popover:hover”）.length）{
$（_this）.popover（“隐藏”）；
}
}, 300);
});
p.description{
字体大小：0.7rem；
颜色：黑色；
页边距底部：0；
}
波弗先生{
顶部：20px！重要；
}
俯卧撑{
垫底：5px；
垫面：5px；
}
h5{
字号：1rem；
颜色：白色；
}
海报{
不透明度：1.0；
&：悬停{
不透明度：0.5；
转换：所有.2易入易出；
}
}

我问题的解决方案与我预期的不同。我忘记了我的SPA和模板文件，它们与popover一起产生了问题。它们不太容易兼容。
不错，但popover会出现在图像上，而不是像popover对象中所述的那样出现在下面。由于某种原因，当复制到sublime时，它根本不起作用。我共享的代码片段按预期工作。悬停显示在图像的底部。我不知道你的代码库出现了什么问题。哦，我的错。现在它在这里工作得非常出色。但问题仍然发生在我的崇高上。我将在我的原始帖子上编辑一个打印屏幕，显示我的代码目前的样子。我解决了这个问题。您确实编写了正确的代码，但是。。！它不起作用，因为我使用类和OOP以及单独的模板文件和单页应用程序。所以popover没有注册，因为它在DOM上不“存在”。一开始我没想到。