CODEWITHSUNDEEP
jqueryqtip2
chainwork
chainwork

Reputation: 2886

jQuery Tooltips plugin qtip2 - How to define custom styles likes qtip1?

I am using the great jquery tooltip plugin qtip 2. Check it out if you have not already. http://craigsworks.com/projects/qtip2/

Does anyone know how to define your own custom css (tooltip colors, borders, backgrounds, radius, etc) for the tooltip as opposed to using their predefined tooltip styles?

What I tried:

If this question helped you, please let me know!

Upvotes: 4

Views: 4663

Answers (2)

Sparky
Sparky

Reputation: 98718

I just put this in my stylesheet. Use whatever properties, you need...

.ui-tooltip .ui-tooltip-content,
.ui-tooltip p,
.ui-tooltip ul,
.ui-tooltip li,
.ui-tooltip,
.qtip {
    max-width: 280px;
    min-width: 50px;
    font-size: 17px;
    line-height: 19px;
    text-align: center;
    border-color: #666;
}

You could also just create your own by pulling one out of the jquery.qtip.css sheet and editing it. Use mystyle the same way you'd one of the predefined qTip2 styles.

/*! mystyle tooltip style */
.ui-tooltip-mystyle .ui-tooltip-titlebar,
.ui-tooltip-mystyle .ui-tooltip-content{
    border-color: #303030;
    color: #f3f3f3;
}
.ui-tooltip-mystyle .ui-tooltip-content{
    background-color: #505050;
}

.ui-tooltip-mystyle .ui-tooltip-titlebar{
    background-color: #404040;
}

.ui-tooltip-mystyle .ui-tooltip-icon{
    border-color: #444;
}

.ui-tooltip-mystyle .ui-tooltip-titlebar .ui-state-hover{
    border-color: #303030;
}

Upvotes: 1

Code Maverick
Code Maverick

Reputation: 20415

I personally have 5 themes to my site. I happen to use jQuery UI's ThemeRoller to do that. jQuery UI and qTip2 use the same class names.

The only caveat I found was the order in which you included the CSS files. You need to override the qTip2 styles, so simply include the jQuery UI CSS file after the qTip2 CSS file.

Doing it this way allows you to pull down updates to qTip2 without having to worry about your custom qTip2 styles being overridden, as well as, giving you a nice GUI to create your theme in.

Upvotes: 3

Related Questions