Vaadin 7: tooltips on mobile devices

I know this has been mentioned a few times, but I am unclear how to solve it: we cannot type on the field in iPhone when a tooltip is showing, or at least not easily. Zooming in and out seem to help. I saw a ticket suggesting that changing orientation should help. But what is the best way to solve this problem for mobile devices? Am I missing documentation on this issue someplace?

In my case, both the “description” and the error message are showing ( they are different, of course ). By dumb luck, this is the only field on the screen and it is required, thus the error always shows on mouseover. I have to admit, I wouldn’t mind removing the error message until the user clicks “Submit”, but not really sure that will fix the mobile issue because an error message is legitimate. Any ideas would be appreciated.

Maybe tooltips on mobile devices should not be hover messages, but should be directly above or below it? Maybe tooltips should always be placed right above the component ( or below or to the side ), but never covering the component? What do people do with mobile devices and tooltips?

As per another post I made, I effectively turned off error message tool tips globally because they were causing such problems in mobile devices. I hated doing it, but the website was not even useable on mobile devices once it got an error message and error indicator. I am sure others have solved this in a better way, so I am open to ideas.

Yet another screwy idea I had was changing css tooltip css such that it always displayed active hover message in some label at the top of the screen. Not even sure that is possible, but at least it would get the message out of the way so maybe mobile users could tap the component, or type into data entry fields.


One quick and dirty workaround could be just implementing a BrowserInfo check to see if the user is on a phone, something like

final WebBrowser webBrowser = Page.getCurrent().getWebBrowser();
if (webBrowser.isIPhone() || webBrowser.isAndroid() || webBrowser.isWindowsPhone()) {
// don't add tooltip, add a descriptive text under the field instead
} else {
// business as usual

yes, I thought of a version of this. In fact, I sort of thought of adding a high level CSS that effectively disables tooltips for all screens ( inside my UI ).

Still trying to think if there is a better way. At this point, I have my website at a good enough point where this is not as urgent an issue as it was earlier, so I can take time to plan a good solution for both desktops and mobile devices.

You know you can also use the
Responsive flag (setResponsive on components)
to toggle styles that apply for only certain dimension ranges, right? So you don’t need to disable all tooltips, just for certain ranges like

.myclassname[width-range~="0-300px"] { } -Olli

Has anyone got a better solution for tooltips on mobile devices? Someone has surely solved this problem. We just need tooltips to work on mobile devices, that is it.

I may have to use a variation on Olli’s idea to turn it off globally for mobile devices based on width, but that is such an ugly solution.

Ok, for those curious, here is how I finally turned off tooltips for android and ios. I don’t like turning off tooltips and would really like to hear how others have solved this for running their websites on mobile devices, but this is a reasonable short term fix.

First of all, my style.scss, which causes my website to behave the way I want, at least using Chrome responsive mode ( still need to confirm on real devices ):

// Import all the mixins for this theme
@import “addons.scss”;
@import “mobiwms”;

.v-android .v-tooltip {

.v-ios .v-tooltip {

.mobiwms {
// Output the actual theme selectors
@include addons;
@include mobiwms;
[/code]Now, what confused me, and could confuse others until I point it out, is that when I put some variation of the same code in my common.scss ( imported in mobiwms.scss ) or directly into mobiwms.scss, it did not work. I finally figured out why as I dug into the resulting HTML. The v-android and v-ios classes are at the body level, but the mobiwms class is at one of the div levels. So my problem was that v-android was a parent class of mobiwms when I included it in mobiwms.scss or common.scss. This is probably obvious to lots of people, but just in case someone out there missed this little nuance, I wanted to point it out.

BTW, as proof for the above, the resulting HTML something like this:

<body scroll="auto" class=v-generated-body v-sa v-ch v-webkit v-android>
   <div id="ROOT-2521314" class="v-app mobiwms wmsui">
      <!-- Main website stuff -->
   <!-- script stuff, for instance the vaadinBootstrap.js -->
   <!-- An iframe -->
   <div id="ROOT-2521314-overlays" class="v-app mobiwms wmsui v-overlay-container">
        <div class="v-tooltip" role="tooltip" aria-live="assertive" aria-relevant="additions" style="margin-left: 0px; margin-top: 0px; left: -4990px; top: -4990px; z-index: 20001; visibility: visible; position: absolute; overflow: visible;">
            <div class="popupContent">
                      <div class="v-errormessage" aria-hidden="true" style="display: none;"></div>
                      <div class="v-tooltip-text"></div>

Comment on above solution: it behaves weird on iPhone, fields going invisible when you click on them. Works fine on Android.

I did figure out that tooltips tap away correctly if using vaadin sampler or vaadin dashboard demo app, on all devices. So maybe I am doing something wrong in my app? I am going to see if someone discusses tooltips not going away on taps.