как я могу показать всплывающую подсказку при нажатии кнопки

Question

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

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

вот код (html и jquery) Колея:

и здесь 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{

        }
    });
});

Answer 1

Попробуйте это:

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>