Let's take a look at how we can write our own custom styles for qTip's tooltips by writing a new purple color scheme:
We'll get started by examining the CSS that codes up the red tooltip style that comes with qTip. You'll find this bit of CSS inside the
jquery.qtip.css
file that was included with the qTip download. Here are all the CSS styles that affect the red tooltips:/*! Red tooltip style */ .ui-tooltip-red .ui-tooltip-titlebar, .ui-tooltip-red .ui-tooltip-content{ border-color: #D95252; color: #912323; } .ui-tooltip-red .ui-tooltip-content{ background-color: #F78B83; } .ui-tooltip-red .ui-tooltip-titlebar{ background-color: #F06D65; } .ui-tooltip-red .ui-state-default .ui-tooltip-icon{ background-position: -102px 0; } .ui-tooltip-red .ui-tooltip-icon{ border-color: #D95252; } .ui-tooltip-red .ui-tooltip-titlebar .ui-state-hover{ border-color: #D95252; }
From examining this CSS...