使用JQuery单击后保持popover停止

Question

我有一个我无法解决的问题。当我点击下图中的星形时，我需要一个弹出窗口：

正在使用的代码：

$('area').popover({
        measure: 'img.image-map',
        mouseOffset: 20,
        container: 'body',
        followMouse: true,
        html: true,
        trigger: 'click'
    });

但有一些问题： 1 - popover跟随鼠标。有了这个我不能使用弹出窗口内的滚动。 2 - 当我只是点击不起作用，因为区域被映射，然后弹出窗口出现在图片

HTML：

<li class="bg bg-casa">     
    <a href="#" class="popover-area" data-toggle="popover" data-placement="auto right"></a>

    <img class="image-map" src="images/arvore-presepio.png" alt="" usemap="#MapCasa" />

    <map name="MapCasa" id="MapCasa">
    <!-- Árvore(estrela) -->
    <area id="arvore" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." alt="" title="" href="#" shape="poly" coords="231,81,252,51,252,39,247,40,248,29,242,22,251,21,255,13,259,22,273,21,266,41,261,50,269,63" />
</map> 

当不使用该脚本并进行简单点击时，它会错过对齐：