更改工具提示位置/箭头

Change tooltip position/arrow

本文关键字：箭头位置工具提示更新时间：2023-09-26

我已经在我的区域地图中创建了一个工具顶，我正在使用http://qtip2.com/

当我调用工具提示时，我的代码与这个问题中的相同

地图区域标签上的工具提示

jQuery(document).ready(function (e) {
jQuery('area').qtip({
    style: {
        classes: 'qtip-dark'
    },
    events: {
        show: function(event, api) {
            api.set({
                'content.text': api.elements.target.attr('title')
            });
        }
    }
});
});

但是我的工具提示总是在我的区域的右下角，有没有办法我可以把它放在我的右上角?

找到下面的答案，它会对你有所帮助。

jQuery(document).ready(function (e) 
                    {
                        jQuery('area').qtip({
                            style: 
                            {
                                classes: 'qtip-default  qtip qtip-light qtip-rounded',
                                width: '250px',
                                height: '70px',
                                tip: true
                            },
                            position:
                            {
                                my : 'bottom left',
                                at: 'top right',
                                adjust: {
                                     method: 'none none', // Requires Viewport plugin
                                     resize: true
                                 },
                            },
                            events: 
                            {
                                show: function(event, api) 
                                {
                                api.set
                                ({
                                    'content.text': api.elements.target.attr('title')
                                });
                                }
                            }
                            });
                    });

感谢Chiral Patel的评论，我找到了一个方法，谢谢!

jQuery(document).ready(function (e) 
                    {
                        jQuery('area').qtip({
                            style: 
                            {
                                classes: 'qtip-default  qtip qtip-light qtip-rounded',
                                width: '250px',
                                height: '70px',
                            },
                            position:
                            {
                                my : 'bottom left',
                                at: 'top right',
                                method:'none'
                            },
                            events: 
                            {
                                show: function(event, api) 
                                {
                                api.set
                                ({
                                    'content.text': api.elements.target.attr('title')
                                });
                                }
                            }
                            });
                    });