Question

I'm using qTip2 to attach tooltips to some of the buttons on my site. One of the buttons, when clicked, needs to change the content displayed in its own tooltip while it is visible.

I found this question on SO that addresses the same issue and provides a working example. The relevant portion of the example is:

var qapi = $('#test').data('qtip'),
    newtip = 'new content';

qapi.options.content.text = newtip;
qapi.elements.content.text(newtip);
qapi.redraw();

Basically, you get the tooltip, define the new content, swap the new content in, and call redraw() on the tooltip so that it redraws itself with the new content in place.

However, both this example and my implementation of it in my own site generate an error in IE8 – even though it works and the content changes as expected! It works in all other browsers too, but does not generate an error.

The error is:

Object doesn't support this property or method

At the line where redraw() is called:

qapi.redraw();

Is there any way that I can prevent this error from occurring? Even though the redraw() function works and I see the tooltip content change as I want, the error causes an audible "ding" and puts a warning icon in IE's status bar.

Was it helpful?

Solution

Apparently there is a reposition() function that both updates the tooltip's content and repositions it so it remains centered relative to the element that triggered it (in case the new content is a different length). So instead of:

qapi.redraw();

Just use:

qapi.reposition();

That has the same effect, but gets rid of the error in IE8.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top