How to remove the arrow from the bootstrap popover that pops up when hovering over a link?

Question

css

There is a bootstrap popover that pops up when hovering over a link, how to remove the arrow from it?
In addition, this popover is designed as a dropdown menu that appears when hovering over a list item. That is, it is necessary that it does not disappear when the cursor moves from the list element to it.
UPDATE:
HTML

<a href='#' rel='popover' data-popover-content='#myPopover' data-placement='bottom'> Peoples </a>

POPOVER

<style>
    #myPopover li {
        list-style-type: none;
        /* Убираем маркеры */
    }
    
    #myPopover ul {
        margin-left: 0;
        /* Отступ слева в браузере IE и Opera */
        padding-left: 0;
        /* Отступ слева в браузере Firefox, Safari, Chrome */
    }
</style>

<div id="myPopover" class="hide">
    <ul>
        <li>Person 1</li>
        <li>Person 2</li>
        <li>Other person</li>
    </ul>
    <a href='#'>Invite New Member</a>
</div>

JAVASCRIPT

$.noConflict();
    $(function () {
        $('[rel="popover"]').popover({
            container: 'body',
            html: true,
            content: function () {
                var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
                return clone;
            }
        }).click(function (e) {
            e.preventDefault();
        });
    });

UPD:
https://jsfiddle.net/tanzt19L/

Answer 1

Post an example