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 ().


    CSS Howto..

    CSS how to use pseudo-class :not with :nth-child

    How to close the menu after click third layer menu item

    How to scale canvas and keep its position on screen?

    How do I prevent text from flowing onto different sections of a page?

    How to detect the form is blank or not by jQuery

    How to make a css 'snail'?

    How to make this layout more responsive in CSS?

    How to set div's height in css and html

    CSS block link - how to get it work properly?

    How to remove the double scroll?

    How to make a responsive div stick to page edge

    how to make edges round in CSS?

    How to obtain non-uniformly scrolling elements and layered “curtain-like” backgrounds on a webpage?

    How to override css for giving background image?

    How to scroll in a div?

    How to remove unwanted whitespace css/html

    How can I make my website width fit fully on iphone 5?

    How to change a portion of text on hover with css [duplicate]

    How to add bold text with CSS? [duplicate]

    Ambiguous match, found 2 elements matching css, how to get to the second one?

    How do I set the background-image property to a linear gradient using jQuery's css method?

    how to make css for work for different mobile sites

    How to avoid this hardcoded index.js when use webpack?

    How do I stop Bootstrap Input Boxes and Buttons from overlapping the header and footer of a page when scrolling?

    How to apply pseudo-element styling to specific class only?

    Show/Hide & Change CSS functions are not working

    How to put text over CSS image carousel?

    How to create css shadow effect [duplicate]

    Using CSS, how can I get the pseudo-class 'empty' on Element B to affect the styling of Element A?

    How to make string comparison exactly