JSFiddle - React, Tailwind, and code Playground

by octavient

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

<button id="popover-trigger" type="button" class="btn btn-primary" title="Popover Title" data-toggle="popover" data-content="This is a draggable popover!">
    Show Popover
</button>

<svg id="leader-line" style="position: absolute; pointer-events: none;">
    <line x1="0" y1="0" x2="0" y2="0" stroke="black" stroke-width="2"/>
</svg>

JavaScript

$(document).ready(function() {
    $('#popover-trigger').popover({
        trigger: 'manual',
        html: true
    }).on('click', function() {
        $(this).popover('toggle');
        updateLeaderLine();
    });
});

$(window).on('resize scroll', updateLeaderLine);


function updateLeaderLine() {
    const triggerOffset = $('#popover-trigger').offset();
    const popoverOffset = $('.popover').offset();

    const x1 = triggerOffset.left + $('#popover-trigger').outerWidth() / 2;
    const y1 = triggerOffset.top + $('#popover-trigger').outerHeight() / 2;
    const x2 = popoverOffset.left + $('.popover').outerWidth() / 2;
    const y2 = popoverOffset.top + $('.popover').outerHeight() / 2;

    $('#leader-line line').attr({ x1, y1, x2, y2 });
}