Search code examples
jquerytwitter-bootstrap-3tipsy

how to do bootstrap tipsy tooltip multiline

as in title, how can I split in two lines the tooltip?

I would use some html tag (like span or p) too.

I already tried html entities, it doesn't work. Some<br> text

Solution

  • The html element that toggles the tooltip must have a data-html attribute with value true

    Example:

    <button type="button"
        class="btn btn-default"
        data-toggle="tooltip"
        data-html="true"
        data-placement="right"
        title="Tooltip on right">Tooltip on right</button>

    The data-html="true" will insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.

    After you add this attribute you may split the tooltip content into multiple lines by using a block element like a <div></div> or <p></p>.

    I suppose you could also add a line break between the lines: <br>

    Documentation here. // Check the Options table.