CODEWITHSUNDEEP
htmlcssformstwitter-bootstrapglyphicons
Paulo Frutuoso
Paulo Frutuoso

Reputation: 311

How to put a glyphicon with tooltip inside a form

I'm working with bootstrap. I want to put a glyphicon inside the form text with a tooltip. I can put the glyphicon in the right side of the form text but the tooltip doesn't work.

any ideas?

this is the html

<div class="right-inner-addon table-error">
  <a>
    <i class="glyphicon glyphicon-exclamation-sign red" data-toggle="tooltip" title="Campo obrigatório."></i>
    <input class="form-control" type="text"/>
  </a>
</div>

and my css

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 8px 10px;
    pointer-events: none;
}

Upvotes: 2

Views: 1075

Answers (1)

blurfus
blurfus

Reputation: 14031

Re-read your question, so here's an update.

Tooltips are not going to show up by themselves, you have to initialize them. Here's the blurb in their documentation

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

To initialize them, follow the JS snippet below.

Also, your code has the CSS property:

.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 8px 10px;
    /* pointer-events: none;  <!-- remove this line */
}

You need to remove it since that prevents the trigger to the tooltip. You also need to specify the data-placement property (right, left, etc) since it is missing.

See running example here (fiddle)

JS

$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        'html': true
    })
});

Upvotes: 1

Related Questions