Add and show tooltip

Navigation
1

How do I add a tooltip to an input and make it active using js? (I'm using twitter bootstrap)

    
asked by anonymous 20.07.2015 / 03:41

1 answer

6

The Twitter Tooltips plugin Bootstrap can receive parameters, including the trigger we can set for manual and call the tooltip when we want, thus remaining active until we indicate otherwise: 

$(document).ready(function() {

  $('#userEmail').tooltip({
    'trigger': 'manual',    // chamada manual
    'title': 'Email aqui',  // texto da tooltip
    'placement': 'top'      // localização da tooltip
  }).tooltip('show');       // chamar tooltip

});
form {
  padding: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <form action="#" method="post">
        <div class="form-group">
          <label for="userEmail">Email address</label>
          <input type="email" class="form-control" id="userEmail" value="" placeholder="[email protected]" data-toggle="tooltip" data-placement="top" title="Email aqui" />
        </div>
      </form>
    </div>
  </div>
</div>
    
20.07.2015 / 13:46
How to zoom in on an image by hovering the mouse over it? Application with Maps