Search code examples
jquerytwitter-bootstraptwitter-bootstrap-3

Add line break to tooltip in Bootstrap 3


I am using Bootstrap 3 and added a tooltip to my div. I've tried using < br > \n and &#013; to create the new line. Would it be a problem with the Bootstrap stopping me?

<div class="content show-tooltip" data-placement="top" 
     data-original-title="1st line of text <br> 2nd line of text">

Solution

  • You need to add data-html="true" to the markup..

    <div class="content show-tooltip" data-html="true" data-placement="top" 
         title="1st line of text <br> 2nd line of text">
    

    Working demo: https://codeply.com/p/C8083WXo5Z

    For Bootstrap v5: data-bs-html="true"

    <div data-bs-html='true' data-bs-toggle='tooltip'
         data-bs-title='1st line <br> 2nd line'>