Question

In qTip1 you could easily style every single tooltip at runtime, but since qTip2 you can ‘only’ pass a CSS class to apply to the tooltip.

So ok this is cleaner, but is there still a way I can change the style (or at least the color) of a tooltip at runtime ?

I guess adding a <style> block in my rendered view defining a class and then using that class could work but I’d prefer a pure javascript way of doing it.

What do you think ?

Answer 1

You can change easily the class (and with this every style) at runtime with:

$("#tip").qtip('option', 'style.classes', 'class-you-want');

SEE my DEMO (It changes the tooltip style at runtime)

RESULT

HTML

<a href="#" id="tip">Tooltip for that</a><br>
<a href="#" id="r">RED</a> - <a href="#" id="b">BLUE</a>​

JavaScript

$(function() {
    $("#tip").qtip({
    content: {
        text: "Test"
        }});
    $("#r").click(function() {
        $("#tip").qtip('option', 'style.classes', 'ui-tooltip-red');
    });
    $("#b").click(function() {
        $("#tip").qtip('option', 'style.classes', 'ui-tooltip-blue');
    });
});​

You can read more in the Documentation