CODEWITHSUNDEEP
htmljquery
kavya8
kavya8

Reputation: 149

bootstrap tooltip hide on hover

I have a input text tag and a textarea ,on change of input and click on textarea tooltip is shown.But by default on hover of input text tag the tooltip should not be shown. I have added a hide on hover for tooltip but still it doesnt work

  $( "#sub-proj" ).change(function() {
          $("#description").click(function(){
              $('#sub-proj').tooltip('show');
        })
        })
  
  $( "#sub-proj" ).hover(function(){
          $(this).tooltip('hide');
        })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<input type="text" id="sub-proj"  placeholder="Project Name" maxlength="50" required="required"  data-toggle="tooltip" data-placement="top" title="name already exist" data-trigger="manual"/><br/>
<textarea  rows="4" cols="45" id="description" placeholder="Description"></textarea>

Upvotes: 1

Views: 420

Answers (1)

Heri Hehe Setiawan
Heri Hehe Setiawan

Reputation: 1633

You can simply replace title attribute with data-title

  $( "#sub-proj" ).change(function() {
          $("#description").click(function(){
              $('#sub-proj').tooltip('show');
        })
        })
  
  $( "#sub-proj" ).hover(function(){
          $(this).tooltip('hide');
        })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<input type="text" id="sub-proj"  placeholder="Project Name" maxlength="50" required="required"  data-toggle="tooltip" data-placement="top" data-title="name already exist" data-trigger="manual"/><br/>
<textarea  rows="4" cols="45" id="description" placeholder="Description"></textarea>

Upvotes: 1

Related Questions