Tooltips in Vaadin 7.2.1

Vaadin 6 / 7 / 8
1

Updating my app to 7.2.1, I see NO tooltips anywhere in the app. I know there were some formatting issues in prior versions, but I’ve seen no one mention a complete absence of tooltips. We use our own theme, derived from reindeer, but have no selectors having anything to do with tooltips. What could be going on?
UI.getTooltipConfiguration()
returns normal values.

2

Looks like it must have to do with this:
http://dev.vaadin.com/icons/back.gif/ticket/13695

And this browser error: [Error]
Fri May 30 13:08:53 GMT-700 2014 com.vaadin.client.VConsole
SEVERE: Could not determine ApplicationConnection for Overlay. Overlay will be attached directly to the root panel

To be fixed in 7.2.2?

3

If it’s of any use, I can report that the following code produces tooltips as expected in Vaadin 7.2.1. The attachment shows an example of the resulting tooltip.

         // decimal formats
        DecimalFormat evenGallon = new DecimalFormat("#");

        String fuelCapacity = evenGallon.format(plane.getFuelCapacity());
        String fuelMAF      = evenGallon.format(plane.getMaxAllowableFuel());
        String fuelLKF      = evenGallon.format(plane.getLastKnownFuel());
        String fuelEPPF     = evenGallon.format(plane.getEstimatedPostFlightFuel());
        String fuelBCF      = evenGallon.format(plane.getFuelBurnCurrentFlight());
        String fuelERF      = evenGallon.format(plane.getEstimatedReturnFuel());
        String fuelMDF      = evenGallon.format(plane.getMinDepartureFuel());

        String tooltip;
        tooltip = "<h3>      " + plane.getRegistration() + " Fuel</h3>"+
                "<ul style=\"color:blue; font-family:Courier, monospace; \">"+
                " <li>Fuel Capacity: .............. " + fuelCapacity + "    </li>" +
                " <li>Maximum Allowable Fuel: ..... " + fuelMAF + "</li>" +
                " <li>Last Known Fuel: ............ " + fuelLKF + "</li>" +
                " <li>Estimated Post-flight Fuel: . " + fuelEPPF + "</li>" +
                " <li>Fuel Burn Current Flight: ... " + fuelBCF + "</li>" +
                " <li>Estimated Return Fuel: ...... " + fuelERF + "</li>" +
                " <li>Minimum Departure Fuel: ..... " + fuelMDF + "</li>" +
                " <p> </p>" +
                "</ul>";

        setDescription(tooltip);

14121.png

4

Steve, thanks for the assistance. I had suspected that my problem might involve using a custom theme, derived from Reindeer, which is run through the Sass compiler. A very simple test case seems to disprove that theory and indicates something more fundamental. Looking at the generated HTML, the first snippet shows a simple test case using a theme derived from reindeer where tooltips show correctly. The second shows a sample from our full app, which shows NO tooltips. Comparing the two, the 2nd problematic extract shows that the “…window-overlays” DIV does not contain the “v-shadow” and “v-tooltip” divs, and is instead a sibling of them, appearing at the end of . In addition, the web-inspector under Safari reveals the following error message for the second case, which seems to shed some light: "
SEVERE: Could not determine ApplicationConnection for Overlay. Overlay will be attached directly to the root panel
".

Example 1: Simple test works:
…
[size=2]
[font=courier new]

<iframe src="javascript:""" id= ... <div id="TooltipTest-1788905707-overlays" class="v-app tooltiptesttheme v-overlay-container" ..... [b] [color=#B22222]
[/color] [/b] <div class="v-shadow" ...
<div class="v-tooltip" role="tooltip ... <div class="popupContent"... [/font] [/size]

Example 2: Larger app ported from Vaadin 6:
…
[size=2]
[font=courier new]

<iframe src="javascript:""" id= ... <div id="mmowgli2-2062638058-overlays" class="v-app mmowgli2 v-overlay-container" ..... <div class="v-shadow" ... <div class="v-tooltip" role="tooltip ... <div class="popupContent"... [b] [color=#B22222]
[/color] [/b]



I hope this helps track down the problem.


[/font]
[/size]

5

My knowledge level is too low to comment, but attached is an HTML trace of my working tooltip. I presume you’ve re-compiled the theme and widgetset for each Vaadin version?
14153.png

6

I sure have done that, but I appreciate the reminder.

7

After some tedious trial and error testing, I have found that the reason my tooltips were totally missing is because the touchkit addon was being included in the widgetset for my non-touchkit app. With the benefit of hindsight, one might have thought to look in that direction at the start since touch screen apps have no mouse-over tooltips. My eclipse project still includes Touchkit and non-Touchkit code, but the widgetsets are now built separately for each entry point.

Vaadin 7.2.2 still shows improper styling of the tooltips, but that has been reported in other threads. The attached image shows what I get instead of the normal yellow rectangle. This is no doubt related to the error which shows up in the browser debug window: “Could not determine ApplicationConnection for Overlay. Overlay will be attached directly to the root panel”

We use an extensive theme/stylesheet which inherits from Reindeer.

Hope this report helps others.
14211.png

8

We have the same problem and do need a quick fix for that.
Debug Window shows: ‘Could not determine ApplicationConnection for Overlay. Overlay will be attached directly to the root panel’ since Upgrade from 7.1.0 to 7.2.1 due to a problem with ServerPush. Upgrade to 7.2.2 did not change anything.
Our Theme inherits the Chameleon-Theme.
Any suggestions?

9

As a quick temporary fix, you should be able to copy the CSS/Sass rules involving tooltips from the base theme and leave out the v-overlay element, so that it matches the tooltips in the wrong place. It might work.

10

Speaking for my team, if we could get definitive acknowlegement that the error we are seeing is known in 7.2.2. and repeatable by the Vaadin staff, I would be willing to wait for a proper fix.

11


http://dev.vaadin.com/ticket/12883
 is the applicable ticket, and it has been reopened, but not to be fixed until 7.3.0! Again, to replicate the bug, it may be necessary to used a derived theme in the test app. View above for details. (It seems unadvisable to let such an error persist in released code as long as it has been!)

12

Is there any possible workaround for that problem?
We have a short

Could you please give a bit more information on that possible quickfix - i can´t find a way to get it work.

13

Same/similar experience here. Moving from 7.1.13 to 7.2.2 - the tooltips present as transparent text without font-formatting, no border and no background.

14

Same problem with java script extensions:
http://dev.vaadin.com/ticket/14028

15

Here’s a quick fix that worked for me:

I had the same problem moving from 7.1.11 to 7.2.2. I have a theme called ‘dashboard’.

Looking at the generated HTML code, I noticed that in 7.1.11, the tooltip div is opened under a parent div which has the ‘dashboard’ class (attachement#1). Everything under ‘dashboard-1047860588-overlays’ disappear when the tooltip goes away.

However, the new version has a div element as a sibling to the main div with the ‘dashboard’ class (attachement#2). Looking at the css generated by saas-compiler, I noticed that every style related to the tooltip is a subclass of dashboard, i.e. ‘.dashboard .v-tooltip: {…}’ and since in the new version v-tooltip is not a child of dashboard, its styles are not picked up by the browser.

FIX: I compiled all the relevant styles for tooltip from the generated styles.css, stripped off all the parent class dashboard, and added it directly to the css file. It is a hack and it is dirty, but it works. Here’s my styles.scss file:

/* Import all the mixins for this theme */
@import "dashboard.scss";


/* Font embeds and keyframe definitions need to be 
 * on the top level of the stylesheet, not nested 
 * with any selectors, so we output them here */
@include font-open-sans;
@include icons-fontello;
@include dashboard-keyframes;


/* Output the actual theme selectors */
.dashboard {
    @include dashboard;
}

/* Hack: get v-tooltip out of the dashboard theme and compile it directly*/
.v-tooltip {
    background: #343638;
    background: rgba(52, 54, 56, 0.92);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    padding: 4px;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    border-radius: 0.3em;
    border: none;
    min-width: 10em;
    -webkit-animation: fade-in 160ms ease-out;
    -moz-animation: fade-in 160ms ease-out;
    -ms-animation: fade-in 160ms ease-out;
    -o-animation: fade-in 160ms ease-out;
    animation: fade-in 160ms ease-out;
    opacity: 1;

    font-size: 12px;
    padding: 0 4px;

    font: normal 14px / 1.5 "Open Sans", Arial, sans-serif;
    
    overflow: auto;
    cursor: default;

}
.v-tooltip-text {
    overflow: auto;
}

.popupContent > div {
    width: 100%  !important;
    max-width: 500px !important;
    height: 100%;
}

.v-menubar-popup .popupContent:focus, .v-menubar-popup .popupContent .v-menubar-submenu:focus {
    outline: none;
}
.v-window.v-has-width > div.popupContent, .v-window.v-has-width .v-window-wrap, .v-window.v-has-width .v-window-contents, .v-window.v-has-width .v-window-contents > div {
    width: 100%;
}

.v-window.v-has-height > div.popupContent, .v-window.v-has-height .v-window-wrap, .v-window.v-has-height .v-window-contents, .v-window.v-has-height .v-window-contents > div {
    height: 100%;
}

15207.png
15208.png

16

I tried 7.2.3 and 7.3.0.alpha3. They have the bug.

17

I’m happy to report that the 7.2.4 update fixed the tooltip bug. One experience that might help others: the SASS compiler in 7.2.4 apparently handled an error in my theme differently – more rigorously – than before. This prevented theme compilation and resulted in significant hair loss on my part until I found the (my) error. A word to the wise!

18

Thanks that worked for me!