时间戳

首页 > 解决方案 > 如果为空值，则提高输入工具提示

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

问题描述

我试图在单击按钮后为输入框引发工具提示，但问题不是在按钮单击时引发，而是在将鼠标悬停在输入上时引发，我需要的是，当有人单击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="">

我没有在工具提示中给出任何触发事件然后它也在悬停时引发为什么？

标签： javascriptjqueryhtmlcsstooltip

解决方案

问题

您遇到的主要问题是该.tooltip()方法仅初始化工具提示设置（请参阅此处的文档）。这就是为什么在您第一次单击按钮之前不会显示工具提示的原因，因为这.click()首先会创建它。

所以你需要做的是解决这个问题：

  1. 在点击处理程序之外初始化工具提示
  2. 修改点击处理程序以使用该.tooltip("show")功能（文档）
  3. 创建一个新的处理程序来隐藏你认为合适的工具提示

修改片段

我已经包含了一个新的、修改过的片段，我在其中给出了一个示例，说明您如何完成这三件事，特别是一个如何隐藏工具提示的示例（我的示例在重新单击输入时会这样做）。

JSFiddle 演示

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

推荐阅读