引导工具提示在悬停时隐藏答案

【问题标题】：bootstrap tooltip hide on hover引导工具提示在悬停时隐藏
【发布时间】：2025-12-18 12:20:05
【问题描述】：

我有一个输入文本标签和一个文本区域，在更改输入并单击文本区域时会显示工具提示。但默认情况下，在输入文本标签悬停时，不应显示工具提示。我为工具提示添加了悬停时隐藏，但它仍然不起作用

  $( "#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>

【问题讨论】：

我在您的示例代码中看不到任何工具提示。
您的代码运行良好。当您将鼠标悬停在文本输入上时，工具提示会隐藏。
正如我提到的，必须在输入标签上键入，然后单击 textarea 将显示工具提示。但我不会出现在鼠标悬停上
@HeriHeheSetiawan，但默认的带有文本名称的工具提示已经存在在悬停时显示

标签： html jquery

【解决方案1】：

您可以简单地将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>

【讨论】：