How do I change the CSS style for a YUI tooltip?

Question

I see on the YUI page an example about changing the style for panels in general. But I'd like to change the style for all the tooltips (and not other panels) on my website. All my tooltips are not in one certain DIV, so changing the YUI panel styles within a div won't work for me.

Any tips?

Answer 1

It looks like YUI Tooltips add the class yui-tt to all tooltips. You could style just your tooltips by using that as a common ancestor, i.e.

.yui-tt .bd {
    /* Styles here... */
}

Answer 2

I load the configurator's style sheet (with the default skin (sam.css) already included) in the head of my app followed by my own styles, so they are ready for immediate rendering. However as you mentioned, the YUI loader will subsequently override your styles.

If you load a lot of modules or make a lot of style declarations and don't want to write !important after every one, add the option

skin : {defaultSkin: ''}

to your loader configuration. This will also save a little bit of bandwidth for your users and lead to faster rendering.

Also note, that IE6 doesn't recognize !important so it won't work for that browser.

Hope that helps.