Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.

Bug 514490

Summary: [ToolTip] Improve small screen presentation
Product: [RT] RAP Reporter: Sebastian Habenicht <dev>
Component: RWTAssignee: Project Inbox <rap-inbox>
Status: RESOLVED FIXED QA Contact:
Severity: enhancement    
Priority: P3    
Version: 3.2   
Target Milestone: 3.5 M2   
Hardware: PC   
OS: Windows 7   
See Also: https://git.eclipse.org/r/116054
https://git.eclipse.org/c/rap/org.eclipse.rap.git/commit/?id=05ca8cdfc38299f6e053937d67656339ee9e61ec
Whiteboard:
Attachments:
Description Flags
Current behavior with RWT 3.3.0...
none
Changed behavior with RWT 3.3.0 none

Description Sebastian Habenicht CLA 2017-03-30 10:34:42 EDT 
This is about the ToolTip widget (not Widget#setToolTipText).

The widget has two settings that could be revised in my opinion to provide better support for small screens:

1. Max width and max height in ToolTip.js are set to 50% of the available client document's size; is there a reason for that? I think that (especially on small screens) it would be better to allow the widget to use (almost) all the available size, if the content requires it. On a small screen, the tool tip looks somehow strange, because the message area is so small and there is 50% of space left...

2. The widget's content area has overflow set to "hidden"; this might be set to "auto" instead, to leave it up to the browser how to handle the content; if this is not a desirable default behavior for the framework, it might be an alternative to make it configurable via a setter or via theming.

In general, it would also be great if ToolTips support selection events on markup hyperlinks, as described by RWT#HYPERLINK.
Comment 1 Ivan Furnadjiev CLA 2017-12-05 08:29:48 EST 
TollTip widget now supports fixed width/height set by the theming [1].
[1] http://download.eclipse.org/rt/rap/doc/3.3/guide/reference/theming/ToolTip.html
Comment 2 Sebastian Habenicht CLA 2018-01-05 10:45:49 EST 
Thanks, setting width and height works. Unfortunately, the change does not help with the initial issue for two reasons:

- max width and max height are still set to 50% of the available client document's size; hence, setting reasonable fix width will have no effect if it is greater than the respective max width (which will be the case on small screens)
- content is still cut off if it is too long

It would be great if width and height adjust automatically when no fix width and height has been defined via theming. 
As a quick test I set the popup's maxWidth and maxHeight to 100% (instead of 50%) in Tooltip.construct and use the available width in ToolTip._update to calculate the message area's text and height:

_update : function() {
    var popupWidth = this.getWidth();
    if( popupWidth === "auto" ) {
	  
	//calculate how long the text may be at the most; start with calculating the message area's margin
	var marginWidth = (this._wantedLeft ? this._wantedLeft : 20) * 2; //left margin * 2 to center the box; 20 as fallback...
		
	//take the tooltip's other widths into account
	marginWidth += this._image._computePreferredInnerWidth();
	marginWidth += (this.getPaddingLeft() + this.getPaddingRight());
	marginWidth += this._contentArea.getSpacing();
		
        //subtract the value from the available client width
	var doc = rwt.widgets.base.ClientDocument.getInstance();
	var maxTextWidth = doc.getClientWidth() - marginWidth; 
	
        //proceed with calculating the message size	
        var message = this._message.getText();
        var textSize = this._getTextSize( this._text.getText(), maxTextWidth );
        var messageSize = this._getTextSize( message, maxTextWidth );
	
        //following code omitted, since unchanged
    }
}

This has also the benefit that long markup text without line breaks is not shown in a single line (which currently exceeds the popup width).

I don't know if this is a proper approach, and it has only quickly been tested with FF, Chrome and IE11 and with Chrome on a mobile. However, it does what I needed in my case, maybe you want to take a look at it.
Comment 3 Sebastian Habenicht CLA 2018-01-09 02:14:14 EST 
Created attachment 272180 [details]
Current behavior with RWT 3.3.0...
Comment 4 Sebastian Habenicht CLA 2018-01-09 02:16:36 EST 
Created attachment 272182 [details]
Changed behavior with RWT 3.3.0

I belatedly attached two images with current behavior and adjusted behavior of tool tip to show the differences.
Comment 5 Ivan Furnadjiev CLA 2018-01-09 03:57:43 EST 
Sebastian, could you provide a Gerrit change with your solution? It will be easer to evaluate and review it.
Comment 6 Eclipse Genie CLA 2018-01-25 11:33:44 EST 
New Gerrit change created: https://git.eclipse.org/r/116054
Comment 7 Sebastian Habenicht CLA 2018-01-25 15:24:46 EST 
Ivan, I created the Gerrit change as requested (after reworking the approach). Sorry that it took me so long, I just had to find some time to set everything up.

FYI: the rap-head-runtime-gerrit build failed after my first commit due to an error that does not seem to relate to the change (a test related to server push failed). Later, I amended my commit to remove some white space and fix indentations and after that the build was successful. Maybe you want to look into the failed build: [1]

[1] https://hudson.eclipse.org/rap/job/rap-head-runtime-gerrit/2372/