Add and show tooltip

Asked

Viewed 732 times

1

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

javascript jquery twitter-bootstrap

1 answer

6


The Plugin Tooltips of Twitter Bootstrap can receive parameters, including trigger that we can define to manual and call the tooltip when we intend, thus staying with the same 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>

<script src="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>

Browser other questions tagged javascript jquery twitter-bootstrap

You are not signed in. Login or sign up in order to post.