Control the time a ToolTipText is displayed

[elmono_acosta]

If I have a small text everything is ok. But if I have a larger text it will disapear very quickly, so the user cant read it completly.

How can I control this ?????

[jcompagner]

thats a system property, i see it defaults to 4 seconds.
And it will be application wide so you can never controll it for one tooltip. So if we would change the dismiss time then it would happen for all tooltips.

[Westy]

I would prefer 5 seconds instead of 4. A minor issue, but the extra second would help.

[Harjo]

Johan, can you make adjustable as developer preference?

[yekinabud]

Did this ever make it into preferences? It would be handy.

[ellenmeserow]

Chiming in -- my client just asked for this too...

[david]

Until Servoy adds this in, here's a small plugin to control tooltips. Usage:

Code: Select all

// retrieve/set tooltip initial delay (use milliseconds)
var x = plugins.tooltip.delay
plugins.tooltip.delay = 0

// retrieve/set tooltip time until dismiss (use milliseconds)
var y = plugins.tooltip.dismiss
plugins.tooltip.dismiss = 1000

[ellenmeserow]

This works great!

[Tokajac]

Hello,

Tooltip control via above plugin works well in Smart Client, but not in WebClient?

Is there any version that works for WebClient also? Where can I find it?
If not, how to implement extension for WebClient?


Regards

[pbakker]

It's not possible to control this currently in the Web Client.

Please file a feature request for this, so we can investigate this.

Paul

[david]

Tooltip control via above plugin works well in Smart Client, but not in WebClient?

Is there any version that works for WebClient also? Where can I find it?
If not, how to implement extension for WebClient?

By default, browsers display the title attribute of a dom element as a tooltip. You can modify this default behavior with client-side javascript and almost all javascript libraries (jquery, prototype, YUI, etc) have libraries to do this -- some very advanced.

Servoy also displays tooltips with client-side javascript but instead of writing out title attributes for elements and then manipulating the title attribute it writes out:

Code: Select all

<div style="white-space:nowrap;" class="label" id="sv_46A5EE99_E1E7_495F_A887_F6965D53CE6E" onmouseover="showtip(event, 'Tooltip text here');" onmouseout="hidetip();" tabIndex="-1">Company</div>

The easiest hack then would be to override servoy's client-side javascript functions that deal with the onmouseover and onmouseout events. Here's the code Servoy uses:

Code: Select all

   <script type="text/javascript" ><!--/*--><![CDATA[/*><!--*/      
      var tipTimeout;
      function showtip(e,message)
      {
      var x = 0;
      var y = 0;
      var m;
      if(!e)
      var e = window.event;
      var targetParentWidth = 0;
      var targetParentHeight = 0;
      var src = e.target;   
         if(!src)
      src = e.srcElement;
      if(src.parentNode)
      {
      var positionXY = getXY(src.parentNode);
      var sizeWH = getRootElementSize(src.parentNode);
      targetParentWidth = positionXY[0] + sizeWH[0];
      targetParentHeight = positionXY[1] + sizeWH[1];
      }
      var wWidth = 0, wHeight = 0;
      if( typeof( window.innerWidth ) == 'number' )
      {
       wWidth = window.innerWidth;
      wHeight = window.innerHeight;
      }
      else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
      {
       wWidth = document.documentElement.clientWidth;
      wHeight = document.documentElement.clientHeight;
      }
      else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
      {
       wWidth = document.body.clientWidth;
      wHeight = document.body.clientHeight;
      }
      if(e.pageX || e.pageY)
      {
      x = e.pageX;
      y = e.pageY;
      }
      else
      if(e.clientX || e.clientY)
      {
      x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
      }
      m = document.getElementById('mktipmsg');
      m.innerHTML = message;
      m.style.display = "block";
      m.style.left = x + 20 + "px";
      m.style.top = y - 4 + "px";
      setTimeout("adjustTooltip("+x+","+targetParentWidth+","+wWidth +","+y+","+targetParentHeight+","+wHeight+");", 0);
      m.style.zIndex = 203;
      tipTimeout = setTimeout("hidetip();", 5000);
      }
      function adjustTooltip(x,targetParentWidth,wWidth,y,targetParentHeight,wHeight)
      {
      m = document.getElementById('mktipmsg');
      var tooltipOffsetWidth = x + 20 + m.offsetWidth;
      if((targetParentWidth < tooltipOffsetWidth || wWidth < tooltipOffsetWidth)&&(x - 20 -m.offsetWidth>=0))
      m.style.left = x - 20 -m.offsetWidth + "px";
      var tooltipOffsetHeight = y - 4 + m.offsetHeight
      if((targetParentHeight < tooltipOffsetHeight || wHeight < tooltipOffsetHeight)&&(y - 4 - m.offsetHeight>=0))
      {
      m.style.top = y - 4 - m.offsetHeight + "px";
      }
      }
      function hidetip()
      {
      clearTimeout(tipTimeout);
      var m;
      m = document.getElementById('mktipmsg');
      m.style.display = "none";
      }   
   /*-->]]>*/</script>

Change the value of 5000 (which is milliseconds) to whatever value you want on this line:
 

Code: Select all

tipTimeout = setTimeout("hidetip();", 5000);

Now you need to insert this code block into the output servoy generates after where Servoy is including the code -- which would be in the header section. A web page will then call your functions instead of Servoy's since they were loaded last.

This is actually quite easy to do by modifying the top level html template Servoy uses to generate all web client pages. It is called "MainPage.html" and it is only accessible via WebDav.

On a Mac (with Servoy open) > Finder app > "Go" menu item > "Connect to Server..." sub-menu item > enter "http://localhost:8080/servoy-webclient/templates/default/".

Now open up "MainPage.html" in your favorite text editor. Paste in the slightly modified javascript block between the closing /body and closing /html tags.

Restart Servoy.

Disclaimer: this is a hack However, it's easy to restore to Servoy's default state. Just delete "MainPage.html" and Servoy will regenerate the original file.

[bobcusick]

Thanks, David - really great tips!

[Jan Aleman]

Disclaimer: this is a hack However, it's easy to restore to Servoy's default state. Just delete "MainPage.html" and Servoy will regenerate the original file.

Great tip. Actually this is not a hack but exactly why the templates are editable.

[Tokajac]

Thank you for your solution David! Tested and it works

Further,
tooltips.jar plugin is based on: javax.swing.ToolTipManager
Thinking about integration of WebClient's tooltip control to that plugin...
Incompleteness of WebDav idea is that Servoy has to be restarted for changes to take effect. Need to access programmatically to MainPage.html: can I update MainPage.html and announce the template changes immediately without restarting Servoy?

How to change the tooltips dynamically in WebClient like it's currently possible in Smart Client via the plugin? That's submitted as a feature request


Regards

[danny.richadson]

You also use inline java code:

Packages.javax.swing.ToolTipManager.sharedInstance().setInitialDelay(<some_delay);
Packages.javax.swing.ToolTipManager.sharedInstance().setDismissDelay(<some_delay);


Regards,

Danny