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个部分细节，而不是一个大的弹出式标签。

理想情况下，它最终会像这样

/////////////////////////////
//////////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>';
    },
});

Answer 2

var events = [
	{
    title: 'title here',
    description: 'body here',
    backgroundColor: '#CC0000'
  }, {
    title: 'title2',
    description: 'heyyy',
    backgroundColor: '#00CC00'
  }
];
var popup = '';
$.each(events, function(key, event) {
    popup += '<h3 class="popover-header whiteTxt font-weight-bold" style="background-color: ' + event.backgroundColor + ';"><i class="far fa-calendar"></i> &nbsp; ' + event.title + '</h3>' + ((event.description) ? '<p class="mb-0">' + event.description + '</p>' : '');
});

$('#button-popover').popover({
	boundary:   'window',
  content:    popup,
  html:       true,
  template:   '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-body p-0"></div></div>',
  trigger:    'hover'
});

.whiteTxt {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
    color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.js" crossorigin="anonymous"></script>



<button id="button-popover">Popover with multiple items</button>

单个popover

2 个答案: