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: -102px 0;
}
.ui-tooltip-red .ui-tooltip-icon{
border-color: #D95252;
}
.ui-tooltip-red .ui-tooltip-titlebar .ui-state-hover{
border-color: #D95252;
}
  2. From examining this CSS, we can see that all we need to do to create a new color scheme is to create a new class name and four shades of purple to create a new style. Here's the CSS for my purple color scheme. Open your styles.css file and add these styles:
    /*! Purple tooltip style */
.ui-tooltip-purple .ui-tooltip-titlebar,
.ui-tooltip-purple .ui-tooltip-content{
border-color: #c1c3e6;
color: #545aba;
}
.ui-tooltip-purple .ui-tooltip-content{
background-color: #f1f2fa;
}
.ui-tooltip-purple .ui-tooltip-titlebar{
background-color: #d9daf0;
}
.ui-tooltip-purple .ui-state-default .ui-tooltip-icon{
background-position: -102px 0;
}
.ui-tooltip-purple .ui-tooltip-icon{
border-color: #c1c3e6;
}
.ui-tooltip-purple .ui-tooltip-titlebar .ui-state-hover{
border-color: #c1c3e6;
}
  3. Now, to take advantage of our new purple tooltip style, we simply have to adjust our jQuery code to add the newly created ui-tooltip-purple class to our tooltips. Open scripts.js and adjust the classes being added to the tooltips:
    $('a[title]').qtip({
position: {
my: 'center left',
at: 'center right'
},
style: {
classes: 'ui-tooltip-purple'
}
});

    Now, when you preview the link in the browser, you will see a purple tooltip, as shown in the following screenshot:

    Time for action — writing custom tooltip styles

What just happened?

Using one of the CSS classes provided with qTip, we wrote our own custom style and applied it to our tooltips. You can use any CSS styles you'd like to create a custom appearance for the qTip tooltips. There's virtually no limit to the possibilities for styles when you start mixing in color and font choices, background images, border styles, and so on.

Have a go hero — create a tooltip of your own design

Try writing your own CSS class to style the tooltips. Try a new color scheme, new font styles and sizes, text shadows, box shadows — anything you can think of to make the tooltips match the design of a site or really stand out.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.12.71.146