bootstrap-4 - 引导工具提示在单击时显示但在鼠标移出时隐藏
问题描述
我有一个将文本复制到剪贴板的按钮,当用户单击该按钮以指示文本已成功复制时,我需要显示引导工具提示。
<a onclick="copyText()" role="button" data-toggle="tooltip" data-theme="dark" data-trigger="click" title="Link Copied">
<i class="fas fa-share-alt"></i>
</a>
但是我不希望用户再次单击按钮来隐藏工具提示,因为这会不必要地再次复制文本。相反,我只想在用户点击离开或将光标移出按钮时隐藏工具提示。
有可能这样做吗?
解决方案
您可以按如下方式使用 BootstrapMethods
和API 。Events
function copyText() {
// do something...
}
$(function() {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').on('show.bs.tooltip', function() {
$(this).on('mouseleave', function() {
$(this).tooltip('hide');
});
});
});
body {
padding: 3rem
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<a onclick="copyText()" role="button" data-toggle="tooltip" data-theme="dark" data-trigger="click" title="Link Copied">
<i class="fas fa-share-alt"></i>
</a>
<hr>
<h4>It supports multiple elements</h4>
<a onclick="copyText()" role="button" data-toggle="tooltip" data-theme="dark" data-trigger="click" title="Link Copied">
<i class="fas fa-share-alt"></i>
</a>
<a onclick="copyText()" role="button" data-toggle="tooltip" data-theme="dark" data-trigger="click" title="Link Copied">
<i class="fas fa-share-alt"></i>
</a>
<a onclick="copyText()" role="button" data-toggle="tooltip" data-theme="dark" data-trigger="click" title="Link Copied">
<i class="fas fa-share-alt"></i>
</a>
推荐阅读
- angular - 覆盖只读/禁用样式/CSS
- c++ - Qt 音频文件像大胆一样挥动
- react-native - React Native中带有粘性标题的Sectionlist Horizontal?
- php - PHP为什么在发送到浏览器后不能重定向?
- html - 隐藏部分 HTML 选择选项
- postgresql - 在 PostgreSQL 中正确处理 TIME WITH TIME ZONE
- vb6 - VB6 DAO 3.51突然出现错误(错误91,找不到文件)
- angularjs - 如何从模式窗口更改 $scope 变量
- javascript - 在html中相互显示svg文件
- google-apps-script - 谷歌表条件 HideColumn() & ShowColumn()