I am using qTip2 on my website but have some problems with the css.I have included the following files :jquery.qtip.min.jsjquery.qtip.min.cssIn the js file I have added the following :\[code\]$.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" } });});\[/code\]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 :\[code\].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
rogidXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A); -ms-filter: "progidXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)"; } .ui-tooltip-MySite.ui-tooltip-content{ filterrogidXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323); -ms-filter: "progidXImageTransform.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; }\[/code\]In the declaration of the tooltip I change : \[code\]classes: "ui-tooltip-shadow ui-tooltip-jtools"\[/code\]to \[code\]classes: "ui-tooltip-shadow ui-tooltip-MySite"\[/code\]The problem is that the content do still get the yellow default color? why?
rogidXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A); -ms-filter: "progidXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)"; } .ui-tooltip-MySite.ui-tooltip-content{ filterrogidXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323); -ms-filter: "progidXImageTransform.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; }\[/code\]In the declaration of the tooltip I change : \[code\]classes: "ui-tooltip-shadow ui-tooltip-jtools"\[/code\]to \[code\]classes: "ui-tooltip-shadow ui-tooltip-MySite"\[/code\]The problem is that the content do still get the yellow default color? why?