Jquery UI tooltip doesn't show on anything

Question

I'm working with 2 bootstrap datepickers and I want to verify if the start date is greater than the end date then show a tooltip

Here's what I have so far :

http://jsfiddle.net/k84phas6/

$('#startdate_datepicker').tooltip({ content : "Example"});

Alert is showing up but the tooltip doesn't do anything and I don't understand why.

Any ideas ?

Answer 1

Just checked your fiddle, There are multiple places where you have to make changes.

1. Remove the title="" field from your input box. This is colliding with the tooltip's title field which bootstrap uses.
2. As above answer suggests you have to programmatically trigger it to show.

your code will look like following

here is modified fiddle of yours http://jsfiddle.net/b7urzdxj/

//title removed
<input class="form-control start_date" type="text" placeholder="Start Date" name="startdate_datepicker" id="startdate_datepicker" required="true">

//tooltip modified and programmatically triggered

 if (start > end) {
    e.preventDefault();
        alert("Stop and tooltip");
    $('#startdate_datepicker').tooltip({ title : "Example", placement:'bottom'});
    $('#startdate_datepicker').tooltip('show')
  }

Answer 2

Now you are initing tooltip for that input. You need to open tooltip manually after init like this:

$("#startdate_datepicker").tooltip({
   content: "Message!"
}).tooltip("open");

Answer 3

Add data-toggle="tooltip" and data-trigger="manual" attributes along with title on your startdate_datepicker element and then toggle the tooltip from JS by calling tooltip() method with "toggle" as parameter. Added the code snippet below:

HTML startdate_datepicker element:

<input class="form-control start_date" type="text" placeholder="Start Date" name="startdate_datepicker" id="startdate_datepicker" required="true" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" data-trigger="manual">

JavaScript:

if (start > end) {
    e.preventDefault();
    // alert("Stop and tooltip");
    $('#startdate_datepicker').tooltip("toggle");
}

find the fiddle code