javascript - 如何通过事件更改弹出窗口的延迟?
问题描述
我正在尝试在单击时更改 Bootstrap 弹出窗口中的延迟选项。我希望结果是这样,当您单击第二个按钮时,弹出框会立即显示,但它没有,我不知道为什么。
我尝试使用dispose
, disable
,hide
但它们都不起作用。有没有人有任何想法?
$('[data-toggle="popover"]').popover({
trigger: "hover",
delay: {
show: 1000,
hide: 150
}
})
$('#popOnAnother').click((event) => {
$('#popOnIt').popover('toggle')
})
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<button id="popOnIt" data-toggle="popover" data-content="work please">
I want to pop after deley on hover
</button>
<button id="popOnAnother">
show pop on another button RIGHT NOW!
</button>
jsFiddle:https ://jsfiddle.net/L4tmhux1/11/
解决方案
您可以将带有 Popover 元素的 Button 包装在 div 中,而不是切换按钮的弹出框,而是在包装器上创建新的弹出框并切换它。
<div id="wrap">
<button id="popOnIt" data-toggle="popover" data-content="work god damn it">
I want to pop after deley on hover
</button>
</div>
$('#popOnAnother').click((event)=>{
$('#wrap').popover({
content: $('#popOnIt').data('content')
}).popover('toggle');
});
推荐阅读
- .net - 是否可以将 .Net 核心 MVC 应用程序包装为 dll,添加对另一个控制台应用程序的引用并从控制台应用程序开始?
- http - 如何从http POST请求结果颤振在listview builder上显示数据
- typescript - Typescript 编译器永远不会出错:Type 'string | number' 不可分配给类型 'never'。类型“字符串”不可分配给类型“从不”
- python - 以分类值作为标签的热图
- unity3d - OneSignal SDK 想要在 Unity 中导入时删除所有资产
- vue.js - NuxtJS - 将所有错误的 url 重定向到 404 页面
- javascript - 如何使用 Angular 获取典型的 json 数据
- animation - 如何在 Flutter 中创建滑入滑出动画?
- javascript - React Contenteditable - 如何将 onClick 分配给react-contenteditable?
- c++ - FindCirclesGrid c++11 不起作用,尽管检测器找到了所有点