CODEWITHSUNDEEP
javascriptjqueryhtmlcsstooltip
Pankaj Sharma
Pankaj Sharma

Reputation: 2267

Raise tooltip for input, if empty value

I am trying to raise a tooltip for input box after clicking a button but the problem is instead of raising on button click it is raising when hover on input, what I need is, when someone clicks on Create Stock it checks the value of input with id ="id_stock", if empty then raise tooltip to that input box and get disappear when start filling the input. Here is what I tried.

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

I didn't give any trigger event in tooltip then also It is raising on Hover why?

Upvotes: 2

Views: 2866

Answers (1)

petetetete
petetetete

Reputation: 465

The Problem

The main issue you are running into is that the .tooltip() method only initializes the tooltip setup (see documentation here). This is why the tooltip does not show up until you have clicked the button the first time, because that .click() creates it in the first place.

So what you would need to do to fix this would be:

  1. Initialize the tooltip outside of the click handler
  2. Modify the click handler to use the .tooltip("show") feature (docs)
  3. Create a new handler to hide the tooltip as you see fit

Modified Snippet

I've included a new, modified snippet in which I give an example of how you might complete these 3 things and specifically an example of how you would hide the tooltip (my examples does it on re-click of the input).

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

Upvotes: 5

Related Questions