Поднимите всплывающую подсказку для ввода, если пустое значение - PullRequest
Новая
       9

Поднимите всплывающую подсказку для ввода, если пустое значение

0 голосов
/ 05 июля 2018

Я пытаюсь вызвать всплывающую подсказку для поля ввода после нажатия кнопки, но проблема в том, что вместо нажатия кнопки, она поднимается при наведении на ввод, что мне нужно, когда кто-то нажимает 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="">

Я не дал никакого события триггера во всплывающей подсказке, а также поднимается на Hover, почему?

1 Ответ

0 голосов
/ 05 июля 2018

Проблема

Основная проблема, с которой вы сталкиваетесь, заключается в том, что метод .tooltip() только инициализирует настройку всплывающей подсказки ( см. Документацию здесь ). Вот почему всплывающая подсказка не появляется, пока вы не нажмете кнопку в первый раз, потому что .click() создает ее в первую очередь.

Итак, что вам нужно сделать, чтобы это исправить:

  1. Инициализировать всплывающую подсказку вне обработчика щелчка
  2. Измените обработчик щелчков, чтобы использовать функцию .tooltip("show") ( документы )
  3. Создайте новый обработчик, чтобы скрыть подсказку по своему усмотрению

Модифицированный фрагмент

Я включил новый, измененный фрагмент, в котором я привожу пример того, как вы могли бы выполнить эти 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="">
...