Tooltip on grid cell won't close on mobile device

Vaadin 6 / 7 / 8 Framework UI
1

I am using the setDescriptionGenerator ( see below ) to show a tool tip on a grid cell. When I hover over the cell the tool tip pops up. When I click elsewhere on the site the tool tip closes. When viewing the grid on a mobile device, the tool tip shows but does not close when I click anywhere else on the page. I have to reload the web site to get it to close. Is there something I can do to get the tool tip to close on the mobile device.

gridRequestIRWO.addColumn( RequestIRWO::getLongDesc ).setCaption( “Description” ).setDescriptionGenerator( RequestIRWO::getLongDesc );

2

Hi Steven, Have you checked this issue from GitHub https://github.com/vaadin/framework/issues/10435 ? I think it is more generic issue than just Grid. Also there seems to be some sort of hint for workaround. Which mobile browser is in question?

3

I did see that and I don’t know if what I did to implement this is correct. It didn’t work. I tested on an iPhone 8 and a newer Samsung phone.

I am not very fluent in css and how vaadin uses them. I have the following files in the project

lmsResonsiveTheme.scss
styles.scss 
addons.scss 
style.css 

styles.scss and addons.scss seem to include other files only
styles.css appears to have the compiled version of all my files including my responsive theme

lmsResonsiveTheme.scss  where I placed this code at the bottom
.v-tooltip {
	background-color: rgba(50, 50, 50, 0.9);
	-webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	color: white;
	padding: 4px 8px;
	border-radius: 3px;
	max-width: 35em;
	overflow: hidden !important;
	font-size: 13px;
	margin-left: 2px;
	} 

I compiled everything yet it still has the same outcome.  Can't close the tooltip
4

Same problem here. I assume it is a problem between the function of the device and the timing of the tooltip. I tried various timings and was not successful to find a solution. I finally created a secondary page with a back button, put a button click listener on the component of interest and navigated to the secondary page to provide the information instead of the tooltip. Not optimum in every use case, but it turns out to be a good solution for me.