I've been struggling to get my bootstrap popover to show up inside the element I'm calling it on, next to my mouse cursor. Despite extensive research in the popper.js documentation and numerous attempts with various parameters, including the 'offset' modifier, I can't seem to make the popover appear where I want it to.
Here's an example of what I've tried so far, aiming for the popover to appear near the mouse click within a large 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');
Despite trying various positioning methods, the 'placement' modifier seems to dominate all others, leaving me unsure of how to override its positioning during the popper.js update process. Any help would be greatly appreciated.