Два Bootstrap поповер названия внутри одного

Question

пирога у меня небольшой вопрос

У меня есть эта строка кода

<i style="font-size:28px;" class="fa fa-info-circle" data-toggle="popover" id='example' title="text is entered here, Text two also is here. data-content="two forms of content will be here"></i> 

В идеале я хочу иметь два заголовка, так что я могу иметь информацию который содержит 2 части деталей внутри, а не одну большую вкладку popover.

В идеале было бы в конечном итоге глядя, как это

///////////////////////////// 
//////////Title////////////// 
///////////////////////////// 
//       // 
//       // 
//  Content   // 
//       // 
//       // 
///////////////////////////// 
///////////////////////////// 
///////////Title///////////// 
///////////////////////////// 
//       // 
//       // 
//  Content   // 
//       // 
//       // 
///////////////////////////// 

Спасибо большое! И я надеюсь, вам понравится время и усилия, размещенные на картинке выше!

Редактировать

Пропущенный JS код, смотрите ниже

$('#example').popover({placement: 'right'}); 

Answer 1

Вы можете сделать это с вариантами пользовательских поповер в boostrap:

http://getbootstrap.com/javascript/#popovers-options

и проверить вариант содержания:

$('#example').popover({ 
    placement: 'right', 
    html: true, 
    content: function() { 
     return '<h3 class="title1">Title 1</h3><div class="content1">Content 1</div><h3 class="title2">Title 2</h3><div class="content2">Content 2</div>'; 
    }, 
});