Bootstrap Popover需要设置数据原始标题的样式

时间:2014-02-27 21:15:43

标签: css twitter-bootstrap popover

在bootstrap中创建了一个带有标题的popover(data-original-title)。我怎样才能大胆?

<td class="setWidth concat"><div class="boldTitle"><a href="#" class="tip" rel="popover"             data-trigger="hover"  data-content="Hypercholesterolemia is a condition characterized by very high levels of cholesterol in the blood. Cholesterol is a waxy, fat-like substance that is produced in the body and obtained from foods that come from animals (particularly egg yolks, meat, poultry, fish, and dairy products). The body needs this substance to build cell membranes, make certain hormones, and produce compounds that aid in fat digestion. Too much cholesterol, however, increases a person's risk of developing heart disease." 

data-original-title="Hypercholesterolemia">

<span style="cursor:pointer;">Hypercholesterolemia</span></a></div></td>

小提琴链接http://jsfiddle.net/DivineChef/8J5w6/1/

1 个答案:

答案 0 :(得分:11)

以下是实现目标的三种可能性。

  1. 使用data-html=true并将您的标题包装在<strong>元素

    <a href="#" class="tip" rel="popover"
       data-trigger="hover" data-content="Hypercholesterolemia..."
       data-original-title="<strong>Hypercholesterolemia</strong>"
       data-html="true">Hypercholesterolemia</a>
    

    DEMO with data attribute

  2. 初始化时使用html: true并将标题包装在<strong>元素中

     $('[rel=popover]').popover({ html : true });
    

    DEMO with popover param

  3. 使用CSS

    更改所有弹出框标题的外观
    .popover .popover-title {
        font-weight: bold;
    }
    

    DEMO with general popover css