How may I transform some text to italic using the tooltip of bootstrap ?

This is a snippet code..

In my exemple I want to transform the text "title" to italic !

Thank you

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});

<script src=".11.3/jquery.min.js"></script>

<script src=".3.5/js/bootstrap.min.js"></script>


<ul>
     <li><a href="#"> msg1</a>
     </li>
     <li data-toggle="tooltip" data-placement="bottom" title="this is a <i> title </i>">
         <a href="#">msg2</a>
     </li>
</ul>

How may I transform some text to italic using the tooltip of bootstrap ?

This is a snippet code..

In my exemple I want to transform the text "title" to italic !

Thank you

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>


<ul>
     <li><a href="#"> msg1</a>
     </li>
     <li data-toggle="tooltip" data-placement="bottom" title="this is a <i> title </i>">
         <a href="#">msg2</a>
     </li>
</ul>

• javascript
• css
• twitter-bootstrap

3 Answers 3

You can add data-html="true" to your li tag as such:

<li data-html="true" data-toggle="tooltip" data-placement="bottom" title="this is a <i> title </i>">
         <a href="#">msg2</a>
</li>

Make sure you use data-html="true" in the tooltip markup.

http://www.codeply./go/tjkGpE9vAJ

To change the text to Italic you can simply do this in your CSS:

.tooltip-inner {
    font-style: italic;
}

This is the class to target the text in the bootstrap tooltip, make sure to include your custom CSS AFTER the bootstrap CSS

This opens up a lot more possibilities in styling your tooltip

Hope this helps!