使用Bootstrap将斜体文本转换为工具提示

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

我怎样才能使用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.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/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>

3 个解决方案

#1

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

确保在工具提示标记中使用data-html =“true”。

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

#2

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

您可以将data-html =“true”添加到li标签中:

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

#3

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

要将文本更改为Italic,您只需在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

这是在bootstrap工具提示中定位文本的类,确保在bootstrap CSS之后包含自定义CSS

EDIT

This opens up a lot more possibilities in styling your tooltip

这为样式化工具提示开辟了更多可能性

Hope this helps!

希望这可以帮助!

#1