在光标位置旁边放置 Bootstrap 弹出窗口（在单击的元素内部）

Question

我有一个 bootstrap 弹出框，我似乎无法在我调用它的元素内显示它，它就在我的鼠标旁边。我通过 popper.js 文档进行了广泛搜索，并尝试使用 'offset' 修饰符，并在不同的配置中调整了我能想到的几乎所有其他参数，但似乎无论如何我做的弹出窗口固执地想要定位到它的四个字符串方向之一，并且不会出现在我调用它的元素内，在我当前光标位置旁边。

下面是一个示例，可以让您了解我的尝试。同样，我试图将弹出窗口定位在鼠标单击发生的位置旁边，在一个大的 div.

中

$(".a_large_div").click(function(e) {
    var relX = e.pageX - parentOffset.left;
    var relY = e.pageY - parentOffset.top;
    var height = $('.popover').height();
    $(this).popover({
        placement: 'top',
        offset:'-'+(relX + 1000)+'px,-'+(relY)+'px',
        title: 'My Popover', 
        html:true,
        trigger: 'manual',
        modifiers: {
            flip: { enabled: false },
            inner: { order: 700, enabled: true },
            applyStyle: { order: 900, enabled: true, fn: (data, options) => 
                { 
                     data.styles.left = "1000px";
                     console.log(data, options);
                     return data;
                }   
            },
            offset: { order: 0, enabled: true, offset: '-'+(relX + 1000)+'px,-'+(relY)+'px'  },
            },   
            boundary: this,
            content: function() {return $("#my_popover_content").html();},
            delay: 100
    }).on('show.bs.popover', function() {
        // execute some code
    }).on('shown.bs.popover', function() {
        // execute some code
    }).on('inserted.bs.popover', function() {
        Object.assign($('.popover')[0].style,{left:""+relX+"px !important",top:""+relY+"px !important"});
    }).on('hidden.bs.popover', function() {
        // execute some code
    }).on('hide.bs.popover', function() {
        // execute some code
});

$(this).popover('toggle'); 

$('.popover').css('left', (relX) + 'px');
$('.popover').css('top', (relY) + 'px');

我已经尝试了所有这些不同的定位方法，但都无济于事，似乎 'placement' 修饰符覆盖了所有这些方法，我不确定在 popper.js 更新过程中的什么时候我会能够覆盖它的定位。在此先感谢您的所有帮助。

Answer 1

回顾这个问题，我可以看出这是一个“做得太多”的经典案例，我做的事情太多了，以至于为了构建和测试而隔离特定功能具有挑战性.

我想我会回过头来回答这个问题，因为我发现这是一个相对简单的问题。

弹出窗口可以指定绝对位置，并且可以通过分配单击事件对象元数据的 x 和 y 坐标提供的 'left' 和 'top' css 值来定位。

var data=[
  {"x":10,"y":10,"height":100},
  {"x":120,"y":10,"height":120},
  {"x":230,"y":10,"height":150},
  {"x":340,"y":10,"height":180},
  {"x":450,"y":10,"height":200}
];


var bar = d3.select("#barchart").append("svg")
.attr("width",1000)
.attr("height",250)
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x",function(d){return d.x }) 
.attr("y",function(d){return 250 - d.height})
.attr("width",90)
.attr("height",0)
.on('click', function() {
  var left = d3.mouse(this)[0];
  var top = d3.mouse(this)[1];
  var theHeight = $('.popover').height();
  $('.popover').show();
  $('.popover').css('left',(left+10)+'px');
  $('.popover').css('top', (top-(theHeight/2)-10)+'px');
  })
.style("fill","blue")
.transition()
.duration(4000)
.attr("height",function(d){return(d.height)});

.popover {
    position:absolute;
    display:none;
    background:#fff;
    border: 1px solid #999;
    padding:10px;
    width:auto;
    box-shadow:0 0 10px rgba(0, 0, 0, .5);
}
.popover:after, .popover:before {
    right: 100%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.popover:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #ffffff;
    border-width: 10px;
    top: 50%;
    margin-top: -10px;
}
.popover:before {
    border-color: rgba(201, 201, 201, 0);
    border-right-color: #c9c9c9;
    border-width: 11px;
    top: 50%;
    margin-top: -11px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div id="barchart"></div>
<div class="popover">
  <p>hello world</p>
</div>

https://codepen.io/modularmoon/pen/gOLooeb

在光标位置旁边放置 Bootstrap 弹出窗口（在单击的元素内部）

Placing Bootstrap popover next to cursor position (inside of clicked element)

javascript

css

bootstrap-popover

bootstrap-4

popper.js