Question

我在我的区域地图中有一个tooltop我已经使用http://qtip2.com/

完成了

我在调用工具提示时的代码与此问题Tooltip on map area tag

中的代码相同

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')
            });
        }
    }
});
});

但是我的工具提示始终位于我所在区域的右下角，是否有任何方法可以将其放在我的右上角？

Answer 1

找到以下答案，对您有所帮助。

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')
                                });

                                }
                            }
                            });
                    });

Answer 2

感谢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')
                                });

                                }
                            }
                            });
                    });

更改工具提示位置/箭头

2 个答案: