Change font size in data-content

debugcn Published at Dev

Nicholas

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 ?

Dhaarani

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.