javascript - 如果为空值，则引发输入工具提示

Question

我试图在单击按钮后为输入框引发工具提示，但问题是当鼠标悬停在输入上时，而不是在按钮单击时引发，我需要的是，当有人单击创建库存 它检查 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() 首先创建了它。

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

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

修改后的代码片段

我添加了一个新的、修改过的代码片段，其中给出了如何完成这三件事的示例，特别是如何隐藏工具提示的示例(我的示例在重新单击输入时执行此操作) .

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="">