Question

I have a qTip that I’m using to display data with. It’s working great except for the formatting of tabular data.

The content for the qTip has a table embedded in it. Despite having used the ui-tooltip-green class, the tabular content is retaining the default formatting established in my default stylesheet.

How can I cancel out the default formatting that’s coming from my default stylesheet and instead use the styling found in the ui-tooltip-green class?

Here’s a picture of what the tooltip looks like – you can see the tabular data taking on a different format:

Answer 1

If you have css rules overwriting each other and are not sure how to solve it, you might want to read up on specificity in css. While it doesn’t soundlike this is necessarily the cause of the problem, the issue is very much related to the topic. In your case it sounds like you have no rules to be applied to that table, so it’s grabbing some more general rules somewhere higher up in the specificity tree.

To be clear, the easiest solution to your problem probably lies in you editing/adding css rules to be specific where you want them to be. Specifically (excuse the pun) you need to be explicit in your css that you want that table and its elements to be styled like their parents.

e.g. if the css for a link in the tooltip looked something like this:

.ui-tooltip-green a {
     color: rgb(0,255,0);
     font-weight: bold;
}

Then more entries specific to the table would force the style to that element, e.g:

.ui-tooltip-green table a {
     color: rgb(0,255,0);
     font-weight: bold;
}

Without seeing all of the code involved it’s hard to give you a clear answer, but in a general sense you just have to add [more specific] rules for that table.