Input informative, how to do?

Navigation
1

Good afternoon everyone! I'm doing an informative form with the Bootstrap Framework, where in some fields an information bubble should appear on the field (type

asked by anonymous 30.01.2015 / 17:04

1 answer

4

You can use bootstrap itself with the tooltips feature.

Documentation: ToolTips

You only need to apply the data-toggle attributes to the input tag with the tooltip value, a data-placement which is the tooltip position (top, bottom, left, right), a data-trigger which is how the tooltip is (focus, hover, etc.) and define a title which is the text that will be displayed in the tooltip.

OBS: All this is explained in detail in the documentation.

Example: 

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scriptsrc="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="container">
    <div class="row">
        <div class="col-md-10">
            <label for="name">Seu nome:</label>
            <input id="name" class="form-control" type="text" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="Minha dica legal" />
        </div>
    </div>
</div>
    
30.01.2015 / 17:28
Button with transparent background What is ActionBarSherlock for Android?