Tooltipstered class: how to disable the color attribute

Tooltipstered class: how to disable the color attribute

  

In my app in several places I use the Content\Balloon webpattern to show some additional information. However, for the columns the webpattern is added, the text font changes from (default and wanted) black into blue. (image 1)

An inspect on the column with the balloon results in the next image:


The class .tooltipstered (defined in Patters_lisbon) has been added to the column, with the color attribute changing the textcolor to blue. Disabling the color attribute is what I want to achive, giving the following result:


I could off course overrule the class / attribute in my own style sheet, changing it to black. But that's not the right solution for me. I'm using the Content\Balloons for columns with 'links' as well (which have turned blue too), and I don't want them to turn black (link columns have other colors).


Is there any way to disable, delete whatever the color attribute in the .tooltipstered class in the Patterns_Lisbon css?

Don't know if the images in the post are clear ... so I've attached them to this reply.

Adding a Content\Balloon to a Widget does not change the color for me.  I'm using OS 10.0.715.0.

However, you can override what you're getting.  For example, in the screen Sylte Sheet property I put...

SyntaxEditor Code Snippet

.tooltipstered {
    color: red;
}

And this changed the color of my widget data to red.

I tried adding the Content\Balloon to an Expression and a Table... both no change to the default color of black.

Hi,

Try adding something like this to your local theme:

.tooltipstered {
    color: black;
}
a.tooltipstered {
    color: #0074c1;
}

This should preserve the color of links - it overrides the color but keeps an exception for links with the mentioned class. 

The CSS above assumes you're using the Balloon widget with parameter WidgetId = <Link>.Id (for your columns with links). It will need tweaking if you're using the inner <expression>.Id instead.


«Is there any way to disable, delete whatever the color attribute in the .tooltipstered class in the Patterns_Lisbon css?»

You're likely to have a local theme based on LisbonTheme, which is based on Patterns_Lisbon, which itself is based on Patterns_SilkUI.

So, the (long) alternative to the override method above is merging/copying all the CSS from LisbonTheme/Patterns_Lisbon into your own theme, removing the CSS you don't need and deleting the dependency. This has the benefit of reducing the number of included .css files loaded at runtime. However, when upgrading the Lisbon Theme from the Forge, you'll need to copy/merge the CSS again to benefit from its changes. Anyway, don't consider this if the performance gain isn't expected to be significant or you don't feel comfortable with CSS.

Thanks for the suggestions.

I've upgraded Silk UI Web & Lisbon Template to the latest versions, that makes no difference.


Even in a simple test app with no custom CSS it keeps happening in our environment. Strange, but not a major issue. I'll look into it further, and if I find anything I will post it here.


Paulo Ramos wrote:

Hi,

Try adding something like this to your local theme:

.tooltipstered {
    color: black;
}
a.tooltipstered {
    color: #0074c1;
}

This should preserve the color of links - it overrides the color but keeps an exception for links with the mentioned class. 

The CSS above assumes you're using the Balloon widget with parameter WidgetId = <Link>.Id (for your columns with links). It will need tweaking if you're using the inner <expression>.Id instead.


«Is there any way to disable, delete whatever the color attribute in the .tooltipstered class in the Patterns_Lisbon css?»

You're likely to have a local theme based on LisbonTheme, which is based on Patterns_Lisbon, which itself is based on Patterns_SilkUI.

So, the (long) alternative to the override method above is merging/copying all the CSS from LisbonTheme/Patterns_Lisbon into your own theme, removing the CSS you don't need and deleting the dependency. This has the benefit of reducing the number of included .css files loaded at runtime. However, when upgrading the Lisbon Theme from the Forge, you'll need to copy/merge the CSS again to benefit from its changes. Anyway, don't consider this if the performance gain isn't expected to be significant or you don't feel comfortable with CSS.

Hi Paulo, I copied the CSS you suggested and only the first part works ... the text becomes black indeed (column Firstname is plain text).

However, the first column, Sirname, is a link and that also stays black ... the a.tooltipstered doesn't seem to work :-(



Can you post a sample oml showing this issue?  I'm not seeing what you're reporting.

A Link comes with it's own "hover" balloon - the optional "Title" property.  Removing text from the Link Title property and adding a Content\Balloon results in no content displaying at all... and... the Link color does not change - it stays the default link blue.

Solution

Hi Charles,

«The CSS above assumes you're using the Balloon widget with parameter WidgetId = <Link>.Id (for your columns with links). It will need tweaking if you're using the inner <expression>.Id instead.»

If you're referring the inner expression instead of the link, this may work - change the 2nd rule above to:

a .tooltipstered {
    color: #0074c1;
}

(just add a space after a)

Davidk, did you try this using Lisbon theme?

Solution

Paulo Ramos wrote:

Hi Charles,

«The CSS above assumes you're using the Balloon widget with parameter WidgetId = <Link>.Id (for your columns with links). It will need tweaking if you're using the inner <expression>.Id instead.»

If you're referring the inner expression instead of the link, this may work - change the 2nd rule above to:

a .tooltipstered {
    color: #0074c1;
}

(just add a space after a)

Davidk, did you try this using Lisbon theme?

That is exactly what I'm looking for Paulo. Works fine. 

Added an a:hover the same way with another color, 

Thnx for the help.