更改工具提示位置/箭头

Question

I have a tooltop in my area map that I've done which I'm using http://qtip2.com/

my code when I call the tooltip is the same one in this question 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')
            });
        }
    }
});
});

But my tooltip is always on the bottom right corner of my area, is there any way I can let it on my top right corner instead?

Answer 1

Find the below answer it will helpful to you.

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

Thanks to Chiral Patel's comment I've found a way, thank you!

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

                                }
                            }
                            });
                    });