javascript - 如何使用带有引导工具提示的 jQuery hoverIntent 插件
问题描述
如何将hoverIntent jQuery 插件与 Bootstrap Tooltips 一起使用(仅当鼠标停在按钮上而不是通过时才显示工具提示)?
$(function() {
$(".btn").hoverIntent(
$('[data-toggle="tooltip"]').tooltip()
);
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.9.0/jquery.hoverIntent.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
</div>
解决方案
Modified based on a post by shalan.com, try this:
var config = {
over : function(){ $(this).fadeIn('fast'); }, //appear gradually
out : function(){ $(this).fadeOut('fast'); }, //disappear gradually
timeout : 100 };
$("button[data_toggle='tooltip']").hoverIntent( config );
推荐阅读
- ruby-on-rails - Rspec 从测试的应用程序接收帖子
- git - 如何在无需收件人进行任何额外配置的情况下对 githooks 进行版本化和共享?
- java - 为多个数组和 ToString 添加方法?
- c - C 是否总是必须使用指针来处理地址?
- amazon-web-services - s3 presigned url multipart formdata上传错误:签名不匹配
- javascript - restful 服务需要用户名和密码才能获取令牌,是否可以将凭据(用户和密码)保存在服务器端 nodejs 中?
- python - Python:如何求解具有多个解的一组非线性方程
- ruby - TypeError:循环遍历散列数组时,没有将符号隐式转换为整数
- r - 使用 if_else 或 ifelse 在多个条件下进行变异
- python - Click: NameError: name not defined