1 Reply Latest reply on Sep 18, 2008 4:32 AM by Mr. Kiribati

    Tooltip showed externally with setTimeout

    Mr. Kiribati Newbie

      Hi everybody,

      I am trying to show tooltip externally, because I want to delay execution of code on server side (getting value of tooltip from database). Delay property of tooltip is not what I need, because server side code is executed immediatly after mouseover and only displaying of tooltip is delayed.

      I came up with this solution so far, which works perfectly in Firefox, but not in IE (6 or 7).

      <script type="text/javascript">
      var timerID = 0;
      function showToolTip(tooltip, e, timeout)
      {
       if(tooltip != undefined) {
       timerID = setTimeout(function(tooltipObj, evt){tooltipObj.show();}, timeout, tooltip, e);
       }
      }
      
      function hideTooltip(tooltip, e)
      {
       if(timerID) {
       clearTimeout(timerID);
       timerID = 0;
       }
      
       if(tooltip != undefined) {
       tooltip.hide(e);
       }
      }
      </script>
      


      <h:panelGrid
       onmouseover="showToolTip(#{rich:component('tooltipID')}, event, 1000)"
       onmouseout="hideTooltip(#{rich:component('tooltipID')}, event)">
       <h:outputText id="textID" value="#{Bean.textValue}" styleClass="labelLink"/>
      </h:panelGrid>
      <rich:toolTip
       id="tooltipID"
       mode="ajax"
       layout="block"
       value="#{Bean.tooltipValue}"
       attached="false"/>
      

      Can anyone help please ?

        • 1. Re: Tooltip showed externally with setTimeout
          Mr. Kiribati Newbie

          So I finally found solutiion. It's working in IE 6 and 7, Firefox 2 and 3, Opera 9. It is not the best solution, but it's working so it is good enough for me :).

          Jsp code is the same as above, only javascript has changed:

           var timerID = 0;
           var tooltipObj;
           var tooltipEvent;
           function showToolTip(tooltip, e, timeout)
           {
           tooltipObj = tooltip;
           tooltipEvent = Object.clone(e);
          
           if(window.event) {
           tooltipEvent = Object.clone(window.event);
           }
          
           if(tooltip != undefined) {
           timerID = setTimeout('showAfterDelay()', timeout);
           }
           }
          
           function showAfterDelay()
           {
           tooltipObj.show(tooltipEvent);
           }
          
           function hideTooltip(tooltip, e)
           {
           if(timerID) {
           clearTimeout(timerID);
           timerID = 0;
           }
          
           if(tooltip != undefined) {
           tooltip.hide(e);
           }
           }