javascript - Italic text into a tooltip using Bootstrap - Stack Overflow

admin管理员组

文章数量:1387441

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

Share Improve this question Follow edited Jan 14, 2016 at 18:19 Carol Skelly 363k9292 gold badges737737 silver badges647647 bronze badges asked Jan 14, 2016 at 18:14 Mohamed TaboubiMohamed Taboubi 7,0511616 gold badges5959 silver badges9696 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

---

EDIT

This opens up a lot more possibilities in styling your tooltip

Hope this helps!

本文标签： javascriptItalic text into a tooltip using BootstrapStack Overflow