html - 引导工具提示在悬停时隐藏
问题描述
我有一个输入文本标签和一个文本区域,在更改输入并单击文本区域时会显示工具提示。但默认情况下,在输入文本标签悬停时,不应显示工具提示。我为工具提示添加了悬停时隐藏,但它仍然不起作用
$( "#sub-proj" ).change(function() {
$("#description").click(function(){
$('#sub-proj').tooltip('show');
})
})
$( "#sub-proj" ).hover(function(){
$(this).tooltip('hide');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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.2/js/bootstrap.min.js"></script>
<input type="text" id="sub-proj" placeholder="Project Name" maxlength="50" required="required" data-toggle="tooltip" data-placement="top" title="name already exist" data-trigger="manual"/><br/>
<textarea rows="4" cols="45" id="description" placeholder="Description"></textarea>
解决方案
您可以简单地将title
属性替换为data-title
$( "#sub-proj" ).change(function() {
$("#description").click(function(){
$('#sub-proj').tooltip('show');
})
})
$( "#sub-proj" ).hover(function(){
$(this).tooltip('hide');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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.2/js/bootstrap.min.js"></script>
<input type="text" id="sub-proj" placeholder="Project Name" maxlength="50" required="required" data-toggle="tooltip" data-placement="top" data-title="name already exist" data-trigger="manual"/><br/>
<textarea rows="4" cols="45" id="description" placeholder="Description"></textarea>
推荐阅读
- selenium - 无法连接到硒中的chromebrowser 78
- sql - 如何让地理字段填充半径值
- java - 将 @PreAuthorize 添加到服务类时:“在 SecurityContext 中找不到身份验证对象”
- parsing - 有没有办法在自由文本中转义或管理令牌?
- android - Android Material BottomNavigationView 徽章无效
- terminal - mount -uw / 后重新挂载为只读根文件系统
- mysql - 如何选择不与另一个值关联的值?
- javascript - 用于返回用户 A 和来自用户 A 的最新消息的聚合查询无法正常工作
- db2 - db2 循环遍历 sysibm.syscolumns 输出中列出的所有表以获取特定列和特定列值
- c++ - 使用初始化列表和超类构造函数声明子类构造函数的正确方法