Search code examples
jquerytooltipqtipqtip2

Define style in javascript with qTip2?

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 ?

Solution

  • 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

    enter image description here

    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