Question

我希望popover出现在另一个元素而不是触发器上。目前我有：

 $triggerElement.popover({
                title: varTitle,
                content: varContent,
                html: true,
                placement: 'auto top',
                trigger: 'manual'
            });
..........
<div class="shopper"></div> 

<button type="button" class="btn btn-primary">Add</button>

目前，弹出窗口正确触发（按钮点击事件）并位于页面底部。不过，我希望将这个职位设置为div＆＃39;购物者的右上角元素。（div的底部）。这是可能的选择器或你可以帮助我使用CSS。

按钮会触发当前按钮上方的弹出窗口。但我想要在购物者div标签下面绘制popover。因此购物者div标签将是行动触发器。

Answer 1

如果我理解你想要的东西，你需要像这样手动显示/隐藏弹出窗口..

$('.shopper').popover({
  title: "varTitle",
  content: "varContent",
  html: true,
  placement: 'bottom',
  trigger: 'manual'
});

$('#trigger').click(function(){
  $('.shopper').popover('toggle');
});

演示：http://www.bootply.com/7oM1aoycIi

Answer 2

我正在使用bootstrap，其他来自其他文本的事件会触发我们想要显示popover的所选文本框上的popover

＆＃13;

$(function () {
     var showPopover = function () {
        $(this).popover('show');
    }
    , hidePopover = function () {
        $(this).popover('hide');
    };
    
    $('#has-popover').popover({
        content: 'Popover content',
        trigger: 'manual'
    })
    .focus(showPopover)
    .blur(hidePopover)
    .hover(showPopover, hidePopover);
    
    $('#no-popover').on('change',function(){
debugger;
$('#has-popover').popover('show');
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/>

<input id='no-popover' type='text' placeholder='write here something to popover on next textbox'/>
<input id='has-popover' type='text' placeholder='hover or focus me' />

＆＃13;

Bootstrap popover出现在与其触发器不同的元素上

2 个答案: