javascriptjquerytwitter-bootstrapbootstrap-datepickerjquery-ui-tooltip

Jquery UI tooltip doesn't show on anything


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 ?


Solution

  • 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')
      }