Is it possible to set position of a Qtip programmatically?

Question

I'm currently implementing Qtip2 tooltips thoughout my site, and they're working very well.

However, I need to set the position of the tooltip on a per-element basis. For this I've setup a couple of data attributes like this:

<img src="/images/help-icon.png" 
    class="tooltip" 
    title="Lorem ipsum dolor sit amet consectetur adipiscing elit" 
    data-tooltip-my-position="right center" 
    data-tooltip-target-position="left center" />

I have tried using a function to get the data attribute, however it appears that the my and at properties do not accept a function, as this simply places the tooltip in the bottom right/top left which appears to be the default positioning.

$(this).find('.tooltip').qtip({
    show: {
        event: 'mouseenter click'
    },
    position: {
        my: function() {
            return $(this).data('tooltip-my-position'); // doesn't work
        },
        at: function() {
            return $(this).data('tooltip-target-position'); // doesn't work
        }
    }
});

I have looked through the documentation, but there appears to be no guidance on programmatically setting positioning properties on or after initialisation.

Does anyone know if what I'm trying to do is possible, and if so, how?

Ial

do you need to do it with the function? or can you just remove the function altogether and just use $(this).data('tooltip-my-position'); – Stockstill

@wirey Sorry, I forgot to mention I tried that. I think it doesn't work because $(this) is out of scope. – Ial

Answer 1

I just came up with a solution, typically enough just after I posted here.

I hooked up a function to the show event which is passed the target element as a parameter which I can then grab the data attributes from:

$(this).find('.tooltip').qtip({
    show: {
        event: 'mouseenter click'
    },
    events: {
        show: function(event, api) {
            var $el = $(api.elements.target[0]);
            $el.qtip('option', 'position.my', $el.data('tooltip-my-position') || 'right center');
            $el.qtip('option', 'position.at', $el.data('tooltip-at-position') || 'left center');
        }
    }
});

I'll leave this answer here in case it's useful to someone in the future.

Ial

Thanks, that's exactly what I was looking for! Change == to === to get it through JSHint. Also, being anal about it, consider renaming your data- attributes to tooltip-position-my and tooltip-position-at to make them more in line with the API and easier to understand on the HTML end. – Dineric