Change tooltip position/arrow

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?

try this ,`my:"bottom right"` , `at:top right` , `adjust:none none` , You can also check it on this demo page: [Click Here](http://qtip2.com/demos) — chirag satapara, Sep 27 '16 at 12:44
You can make conditions according to `event.pageX ` and `event.pageY` — Abhishek Pandey, Sep 27 '16 at 12:54

score 1 · Answer 1 · answered Sep 28 '16 at 04:26

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

                                }
                            }
                            });
                    });

score 0 · Answer 2 · answered Sep 27 '16 at 15:05

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

                                }
                            }
                            });
                    });

Change tooltip position/arrow

2 Answers2