Question

我需要在弹出窗口中添加自定义类，因此我尝试在调用popover()的位置使用模板选项。但是，每当我引入模板的使用时，我会得到一个标题然后没有内容的popover。什么外面的东西可以打破它？

JS：

$(this).popover({
    template: '<div class="popover my-class" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
    placement:'right',
    trigger:'hover',
    title:'my title',
    content: 'hi'
});

如果我取出模板选项，它可以正常工作。

Answer 1

试试这个：

    <a href="#" id="example" class="btn btn-primary" rel="popover"
   data-content="Popover example"
   data-original-title="Title">Click
</a>

<script>
$().ready(function(){
var Template = '<div class="popover my-class" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>';

    $('#example').popover({
        template: Template,
        placement:'right',
        trigger:'hover'
    });
});
</script>

示例：https://jsfiddle.net/DTcHh/14329/

Answer 2

看起来它工作正常。我添加了一些CSS来显示您的自定义类的工作原理。

您是否可以添加更多代码，或许有其它内容阻止内容正确显示？

JSFiddle：https://jsfiddle.net/Ravvy/297ve4cj/

HTML：

CELERY_TASK_SERIALIZER = 'json'

CELERY_ACCEPT_CONTENT = ['json']

CELERY_RESULT_BACKEND = 'amqp'

CELERY_RESULT_SERIALIZER = 'json'

JavaScript的：

var client = celery.createClient({ CELERY_BROKER_URL: photobutikConfig.tracer.brokerURL,
                                   CELERY_RESULT_BACKEND: 'amqp',
                                CELERY_RESULT_SERIALIZER: 'json'}),
        tracerRequestType = ['tracer.tasks', requestType].join('.');

    client.on('connect', function() {
        var result = client.call(tracerRequestType, [payload]);
        result.on('ready', function (result) {
            client.broker.destroy();
        });
    });

CSS：

<a href="#" data-toggle="popover">Toggle popover</a>

Answer 3

以下是我最终修复它的方法：我更改了触发器，无需设置模板即可点击并检查弹出窗口。事实证明<div class="popover-inner">之后有一个.arrow。一旦我将其包含在模板中，就会显示内容。

弹出模板选项使内容失望

3 个答案: