How to customize qTip2 css?

Tags: jquery,html,css,qtip2

Problem :

I am using qTip2 on my website but have some problems with the css.

I have included the following files :

jquery.qtip.min.js jquery.qtip.min.css

In the js file I have added the following :

$.each($(".tooltip"), function (i, val) {

    var theContent = $(val).html();
    $(val).qtip({
        content: {
            text: theContent
        },
        position: {
            my: "bottom left",
            at: "top right",
            viewport: $(window)
        },
        show: {
            event: false,
            ready: true
        },
        hide: {
            effect: function () { $(this).slideUp(5, function () { $(this).dequeue(); }); }
        },
        style: {
            classes: "ui-tooltip-shadow ui-tooltip-jtools"
        }
    });
});

So far, so good, the problem with this is that it will load the jtools theme, I need to costomize this so I extract the jtools styles from jquery.qtip.css and place it in my own css file like this :

.ui-tooltip-shadow {
    box-shadow:                 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
}
.ui-tooltip-shadow .ui-tooltip-titlebar, .ui-tooltip-shadow .ui-tooltip-content {
}




/* jQuery TOOLS Tooltip style */
.ui-tooltip-MySite{
    background: #232323;
    background: rgba(0, 0, 0, 0.7);
    background-image: -moz-linear-gradient(top, #717171, #232323);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));

    border: 2px solid #ddd;
    border: 2px solid rgba(241,241,241,1);

    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;

    -webkit-box-shadow: 0 0 12px #333;
    -moz-box-shadow: 0 0 12px #333;
    box-shadow: 0 0 12px #333;
}

    /* IE Specific */
    .ui-tooltip-MySite.ui-tooltip-titlebar{
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";
    }
    .ui-tooltip-MySite.ui-tooltip-content{
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";
    }

    .ui-tooltip-MySite.ui-tooltip-titlebar,
    .ui-tooltip-MySite.ui-tooltip-content{
        background: transparent;
        color: white;
        border: 0 dashed transparent;
    }

    .ui-tooltip-MySite.ui-tooltip-icon{
        border-color: #555;
    }

    .ui-tooltip-MySite.ui-tooltip-titlebar .ui-state-hover{
        border-color: #333;
    }

In the declaration of the tooltip I change :

classes: "ui-tooltip-shadow ui-tooltip-jtools"

to

classes: "ui-tooltip-shadow ui-tooltip-MySite"

The problem is that the content do still get the yellow default color? why?

---

Solution :

The problem in my implemenation was that the $.each($(".tooltip"), function (i, val) had to be within $(document).ready(function ().