CODEWITHSUNDEEP
javascriptjqueryhtml
h0merr
h0merr

Reputation: 212

how can i show a tooltip when click a button

I want to show a message in a tooltip if an input field is empty but i dont know, i tried with tooltip but is isn't working and i don't know why, it shows 

    Uncaught TypeError: $(...).tooltip is not a function

here is the code (html and jquery) Rut:

and here the html

Query(document).ready(function () {
    $('#newrut').inputmask({'mask':'99.999.999-*'});


    $('#searchCertification').click(function (e) { 
        e.preventDefault();
        if(!$('#newrut').val()){
            $('#ruttooltip').css('display','inline-block');
            $('#ruttooltip').tooltip();
        }else{

        }
    });
});

Upvotes: 0

Views: 379

Answers (1)

Erick Lanford Xenes
Erick Lanford Xenes

Reputation: 1572

Try this:

var tt;
  $(function() {
   tt = $("#tooltip").tooltip();
  });

function showTooltip(){
      if(!$('#newrut').val()){
          tt.tooltip("open");
      }

}

function onchangeInput(){
          tt.tooltip("close");
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  
  
    <div class="col-xs-12 col-md-2">      

      <input type="text" id="newrut" name="newrut" class="form-control error"
       data-inputmask="'mask':'99.999.999-*'" datamask required
        placeholder="__.___.___-_" onkeyup="onchangeInput()" />
        
       <div id="tooltip" title="No puedes dejar el campo de RUT vacío, o no se puede realizar la busqueda!"></div>
    
      
      <a onclick="showTooltip()" href="javascript:void(0);">Send</a>
    
     </div>

Upvotes: 2

Related Questions