Question

我试图在单击按钮后引发输入框的工具提示，但问题是不是在单击按钮时引发单击，而是在将鼠标悬停在输入上时引发该提示，我需要的是，当有人单击Create Stock时检查id = {"id_stock"的输入值，如果为空，则在该输入框上增加工具提示，并在开始填充输入时消失。这是我尝试过的。

$("#id_stock_btn").click(function() {
  /* Act on the event */
  if(!$('#id_stock').val())
  {
    
    $('#id_stock').tooltip({title: "Please give some stock first."});
  }
  else {
    //Do Some Other Stuff
  }
  
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<!--_____________All Required Header Files End____________________________-->

<label class="control-label" for="id_stock">Stock</label>
<button id="id_stock_btn" type="button" name="stock_btn">Create Stock</button>
<input type="number" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">

那我没有在工具提示中给出任何触发事件，这也是为什么要悬停？

Answer 1

问题

您遇到的主要问题是.tooltip()方法仅初始化工具提示设置（see documentation here）。这就是为什么直到您第一次单击该按钮时才会显示工具提示的原因，因为.click()首先创建了该提示。

因此，您需要执行以下操作来解决此问题：

在点击处理程序之外初始化工具提示
修改点击处理程序以使用.tooltip("show")功能（docs）
创建一个新的处理程序以根据需要隐藏工具提示

修改后的代码段

我提供了一个新的，经过修改的代码段，其中提供了一个示例，说明如何完成这三件事，并具体说明了如何隐藏工具提示（我的示例在重新单击输入时会执行此操作）

JSFiddle Demonstration

// Initialize tooltip on #id_stock input
$('#id_stock').tooltip({
    title: "Please give some stock first.",
    trigger: "manual"
});

// Manually hide tooltip when re-clicking the input
// This can be modified to hide the tooltip whenever you see fit
$("#id_stock").click(function(e) {
    $(this).tooltip("hide");
});

$("#id_stock_btn").click(function() {
  /* Act on the event */
  if(!$('#id_stock').val())
  {
    $('#id_stock').tooltip("show");  // Show tooltip
  }
  else {
    //Do Some Other Stuff
  }
  
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<!--_____________All Required Header Files End____________________________-->

<label class="control-label" for="id_stock">Stock</label>
<button id="id_stock_btn" type="button" name="stock_btn">Create Stock</button>
<input type="number" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">

如果值为空，则提高输入的工具提示

1 个答案:

问题

修改后的代码段