Question

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:

• I reviewed their style guide but it had nothing on defining your own styles. http://craigsworks.com/projects/qtip2/docs/style/
• Tried their forums but they were down (back up now)
• To create my own tooltip classes and reference them
• To convert over my qtip version 1 style definitions (failed)

If this question helped you, please let me know!

Answer 1

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;
}