Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Popover need to style data-original-title

Created a popover in bootstrap that has a title (data-original-title). How can I make it bold?

<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>

Fiddle Link http://jsfiddle.net/DivineChef/8J5w6/1/

like image 265
DivineChef Avatar asked Feb 27 '14 21:02

DivineChef


1 Answers

Here are three possibilities to achieve your goal.

  1. Use data-html=true and wrap your title in a <strong> element

    <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. Use html: true when initializing and wrap your title in a <strong> element

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

    DEMO with popover param

  3. Change the appearance of ALL popover titles with CSS

    .popover .popover-title {
        font-weight: bold;
    }
    

    DEMO with general popover css

like image 149
Alp Avatar answered Oct 20 '22 17:10

Alp