CODEWITHSUNDEEP
csshtml
Nicholas
Nicholas

Reputation: 119

Change font size in data-content

I have created code like this :

<a href="#" data-toggle="popover" data-trigger="focus" title data-content="
<ul>
 <li>Booking Period is from Immediately</li>
 <li>Travelling Period</li>
</ul>" data-original-title>

I got that <ul> from this code :

<a class="text-info" href="#" data-toggle="popover" data-trigger="focus" 
                                                    title="" 
                                                    data-content="<?=$row_rates['data']->description?>">
                                                    <i class="fa fa-info-circle" aria-hidden="true" style="font-size:22px"></i>
                                                </a>

How can I change the font size of content in <li> tag ?

Upvotes: 0

Views: 3638

Answers (5)

Dhaarani
Dhaarani

Reputation: 1370

Add this style .popover ul li{font-size:28px;color:red;}

try it below

$(document).ready(function(){
  $('[data-toggle="popover"]').popover({
    delay: 10 // this is definitely needed !
  });
});

// Listen for inserted template to DOM
$('[data-toggle="popover"]').on('inserted.bs.popover', function () {
  // Create the inside link.
  $inside = $('<ul class="divider"><li>Booking Period is from Immediately</li><li>Travelling Period</li></ul>');
  // Add the click event-handler only once
  $('.popover-content').append($inside[0])
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<a href='#' class='btn' title ='Test' data-trigger='focus' data-toggle='popover' data-html='true' id = 'testOutside'>Click Here </a>

Upvotes: 0

Santosh Khalse
Santosh Khalse

Reputation: 12720

add this style in your HTML page

a>ul>li{
font-size:15px;
}

Upvotes: 0

Anubhav pun
Anubhav pun

Reputation: 1323

You can change the font by inline css as

<a href="#" data-toggle="popover" data-trigger="focus" title data-content="
<ul style="font-size:20px" /*as font-size you want*/>
 <li>Booking Period is from Immediately</li>
 <li>Travelling Period</li>
</ul>" data-original-title>

or By internal css as

   <style>
    ul li {
        font-size:20px; /*as font-size you want*/
    }
    </style>

Upvotes: 0

Bharat
Bharat

Reputation: 2464

You can try like this

ul > li {
    font-size:10px;
}

Upvotes: 0

Prajwal K M
Prajwal K M

Reputation: 157

<a href="#" data-toggle="popover" data-trigger="focus" title data-content="
<ul>
<style>
li{
font:size:20px;
}
</style>
 <li>Booking Period is from Immediately</li>
 <li>Travelling Period</li>
</ul>" data-original-title>

Upvotes: 1

Related Questions