Informative input, how to do?

Question

Good afternoon, you guys! I am making an informative form with the Bootstrap Framework, where in some fields should appear an informative balloon on top of the field (type a dialogue balloon), informing the user how to fill in the field. Plus I have no idea how it is done. Someone can help me?

Answer 1

You can use your own bootstrap with the appeal of tooltips.

Documentation: Tooltips

You only need to apply the attributes data-toggle in the input tag with the tooltip value, a data-placement which is the position of the tooltip (top, bottom, left, right), a data-trigger which is how the tooltip is triggered (Focus, Hover, etc) and set a title which is the text that will be displayed in 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>
<script src="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>