Time for action – writing custom tooltip styles

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:

  1. 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: ...

Get jQuery for Designers Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial