JSFiddle - React, Tailwind, and code Playground

HTML

<br><br><br><br>
<a href="www.google.fr" id='example' data-toggle="popover" title="Popover title" data-content='<div class="btn-group">
  <button type="button" class="btn btn-default">Action1</button>
  <button type="button" class="btn btn-default">Action2</button>
  <button type="button" class="btn btn-default">Action3</button>
</div>'>Hover to toggle popover</a>
<br><br><br><br><br><br>
<div class='square' style='height: 100px; width: 100px; background-color: blue'></div>

JavaScript

$('#example').popover({
    html:       true,
    trigger:    'manual',
    placement:  'top',
    delay:      { "show": 300, "hide": 500 },
    template:   '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>'
});

$('#example').mouseover(function(){
    $('#example').popover('show');
});

        $(document).on('mouseleave','.popover-content',function(){
            $('#example').popover('hide');
        });