Controlling what to show as tooltip text for a Component?

The default tooltip behaviour is to show Component’s description text as tooltip text. However, when the field contains a validation error, the validation error message is appended to the description text. Sometimes it would - however - be convenient to use exactly the same String as a description text and as a error message. Consider the following example:

“Mandatory field, value must be between 1 and 100.”

This text is written in a way that is suits both cases. The problem is, that because the error message is appended to description text, this String will be shown twice:

"Mandatory field, value must be between 1 and 100.

[color=#ff0000]

Mandatory field, value must be between 1 and 100.
[/color]"

So, I would ask you if there is an easy way to control how tooltip texts are shown? We would like to show only the error message in case of a validation error, and only the description text when there is no validation error. Is it possible without altering Vaadin source code?

With advanced CSS selectors this is possible, by using the sibling selector ‘+’, but older browsers fail to support them.

Good tip. Unfortunately, the error message element seems to be always present in the popup content, whether or not there is an actual validation error attached to the field. Here’s an excerpt of the popup content (grabbed using Firebug):

<div class="popupContent">
    <div>
        <div class="v-errorMessage" style="display:none;"></div>
        <div class="v-tooltip-text">Mandatory field, value must be between 1 and 100.</div>
    </div>
</div>

Therefore, using a selector like this:

.v-errormessage + .v-tooltip-text {
    display: none;
}

… causes “normal” tooltip popups to be hidden as well.

When an error is shown, does it look like this?

<div class="popupContent">
    <div>
        <div class="v-errorMessage">Mandatory field, value must be between 1 and 100.</div>
        <div class="v-tooltip-text">Mandatory field, value must be between 1 and 100.</div>
    </div>
</div>

If so, then this might do the trick:

.v-errormessage + .v-tooltip-text {
    display: none;
}

.v-errormessage[style]
 + .v-tooltip-text {
    display: block;
}

This will display
.v-tooltip-text
only when the
style
attribute has been defined on
.v-errormessage
.

If the
style
attribute is always present on the error div, you could instead try to use [font=Courier New]
[style=“display:none;”]

[/font]. This rule matches only when the attribute has been defined to a specific value.

To have an error div there even where there is no actual error feels like a bug to me, though—especially if it causes you to have to make CSS hacks like this. You could
file a ticket
on it, if you like, and specify what behavior you would like to see instead.

Firebug shows it like this:

<div class="popupContent">
    <div>
        <div class="v-errorMessage" style="">
            <div class="gwt-HTML">Mandatory field, value must be between 1 and 100.</div>
        </div>
        <div class="v-tooltip-text">Mandatory field, value must be between 1 and 100.</div>
    </div>
</div>

I used this variation of the CSS rule to achieve wanted behaviour:

.v-errormessage[style=""]
 + .v-tooltip-text {
    display: none;
}

This seems to do the trick for Firefox 5.0. I will check other major browsers soon to see if it works on them as well. If it doesn’t, the duplication of tooltip text is basically just a “cosmetic” issue. At least that’s better than to view no tooltip text at all.

Thank you very much for your helpful comments!

PS. Error message element present in a page that doesn’t contain any errors feels strange to me too. Perhaps the guys at Vaadin have seen this as a tiny performance enhancement, because this way Vaadin does not have to create/delete popup windows all the time or add/remove nodes from the DOM tree. I would say that the current way is an inconvenience, but maybe not a bug. Second opinions?

Works with Opera 11.50 and Chrome 12. Does not, however, seem to work with IE 9. Needs still some debugging.

Was not able to debug this in IE because the “Select element by clicking” function did not work properly in IE Developer Toolbar. Therefore I did not get to see what kind of attributes and CSS rules were applied on the tooltip popup dialog. However, by using the “trial and error” approach I was finally able to define CSS rules that seem to work all major browsers:

.v-errormessage[style=""]
 + .v-tooltip-text {
        display: none !important;
}

.v-errormessage[style]
 + .v-tooltip-text {
        display: inline;
}

.v-errormessage + .v-tooltip-text {
        display: none;
}

Found out that this solution will fail on IE7 and also on IE8 and IE9, if they are run in Compatibility View. Unfortunately, Compatibility View seems to be enabled by default for at least Intranet sites.

The problem is, that IE 7 will not recognize the “style” attribute in attribute selectors. So, the outcome is that user won’t see tooltip text at all. No idea how to fix this.