JavaScript ToolTip Delay! RSS

• • Reply
  

  omerdemir

  Member

  271 Points

  528 Posts

  JavaScript ToolTip Delay!

  Mar 26, 2012 08:42 AM|LINK

  Hello guys. 

  I using this codes for displaying some additional details. I've not a lot of knowledge about javascript.

  How can i add and where i have to add code to delay my hover tooltip?

  any help would be appreciated..

  Ömer

  <script type="text/javascript" id="hover.details">
       Type.registerNamespace("Demo");
  
       Demo.ToolTip = function (panelid) {
           this._panelid = panelid;
           this.x = 0;
           this.y = 0;
       }
  
       Demo.ToolTip.prototype =
  		{
  		    get_PanelID: function () {
  		        return this._panelid;
  		    },
  
  		    set_PanelID: function (panelid) {
  		        this._panelid = panelid;
  		    },
  
  
  
  
  		    BeginShowToolTip: function (event, diaid) {
  		        
  
  		        WebService.GetToolTipText(diaid, this.EndShowToolTip, this.OnError, this.OnTimeOut);
  
  		        this.x = 770;
  		        this.y = event.clientY - 200;
  
  
  		    },
  
  		    EndShowToolTip: function (result) {
  		        var pnl = $get(tooltip.get_PanelID());
  		        if (pnl.innerHTML != null) {
  		            pnl.innerHTML = result;
  		        }
  		        else {
  		            pnl.textContent = result;
  		        }
  
  		        pnl.style.visibility = "visible";
  		        pnl.style.display = "inline";
  		        pnl.style.position = "absolute";
  		        pnl.style.left = tooltip.x + "px";
  		        pnl.style.top = tooltip.y + "px";
  		    },
  
  		    HideToolTip: function () {
  		        var pnl = $get(this.get_PanelID());
  		        pnl.style.visibility = "hidden";
  		        pnl.style.display = "none";
  
  		    },
  
  		    OnError: function (result) {
  		        alert(result.get_message());
  		    },
  
  		    OnTimeOut: function (result) {
  		        alert(result);
  
  
  		    }
  		}
  
       Demo.ToolTip.registerClass("Demo.ToolTip");
      </script>

  • Edited by omerdemir on Mar 26, 2012 08:42 AM
• • Reply
  

  Allen Li - M...

  Star

  10411 Points

  1196 Posts

  Re: JavaScript ToolTip Delay!

  Mar 28, 2012 02:08 AM|LINK

  Hi, you can try jQuery HoverIntent plugin, please refer to the following site:

  http://archive.plugins.jquery.com/project/hoverIntent

  You can also refer to the following example:

  http://forums.asp.net/p/1771255/4844028.aspx/1?Re+jquery+hoverintent+method+not+working

  Please mark the replies as answers if they help or unmark if not.
  If you have any feedback about my replies, please contact msdnmg@microsoft.com
  Microsoft One Code Framework
  
• • Reply
  

  mhbalti

  Member

  611 Points

  260 Posts

  Re: JavaScript ToolTip Delay!

  Mar 28, 2012 08:47 AM|LINK

  omerdemir

  How can i add and where i have to add code to delay my hover tooltip?

  Hey,

  You can use the setTimeout(function,milliseconds)

  deepasp.wordpress.com
  "A candle loses nothing by lighting another candle."
  
• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: JavaScript ToolTip Delay!

  Mar 28, 2012 10:37 AM|LINK

  Hi,

  You can use tooltip plugin.

  http://www.delicious.com/anupdg/tooltips

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
• • Reply
  

  omerdemir

  Member

  271 Points

  528 Posts

  Re: JavaScript ToolTip Delay!

  Mar 29, 2012 02:20 PM|LINK

  Thanks everyone for replies. 

  i tried this codes but did not work..

  andy idea? any help?

  Thanks in advance

  HideToolTip: function () {
  		        var pnl = $get(this.get_PanelID());
  		        pnl.style.visibility = "hidden";
  		        pnl.style.display = "none";
  		         
  
  		    },
  
   timeMsg: function () {
  
  		        var t = setTimeout("HideToolTip()", 500);
  		        
              }
  
  
  
  //my gridview on row data bount event is
      protected void gvHrEmploye_RowDataBound(object sender, GridViewRowEventArgs e)
      {
  
          
          if (e.Row.RowType == DataControlRowType.DataRow)
          {
              int diaid = Convert.ToInt32(gvAll.DataKeys[e.Row.RowIndex].Value);
  
              e.Row.Attributes.Add("onmouseover", "tooltip.BeginShowToolTip(event," + diaid + ") ");
              e.Row.Attributes.Add("onmouseout", "tooltip.HideToolTip(timeMsg)");
             
          }
  
      }

  
  
  

• • Reply
  

  FightAsABull

  Contributor

  2228 Points

  424 Posts

  Re: JavaScript ToolTip Delay!

  Mar 30, 2012 01:31 AM|LINK

  Hi, hope this helps:

  http://www.eggheadcafe.com/community/asp-net/17/10142982/datacontrolrowtypeheader.aspx

• • Reply
  

  omerdemir

  Member

  271 Points

  528 Posts

  Re: JavaScript ToolTip Delay!

  Mar 30, 2012 06:55 AM|LINK

  Thank you for reply but i need add delay to my codes. 

  i just want to hide tooltip after 500ms onmouseout. 

  Cheeers

  Ömer

• • Reply
  

  omerdemir

  Member

  271 Points

  528 Posts

  Re: JavaScript ToolTip Delay!

  Apr 01, 2012 08:30 AM|LINK

  Hello again. 

  Added function Hide and added clear timeout row to beginshowtooltip function. and its ok. 

  Hide: function () {
              hovertimeout = setTimeout(function () { tooltip.HideToolTip()  }, 2000);
               },
  
  
  
  
  		    HideToolTip: function () {
  		        var pnl = $get(this.get_PanelID())
  		            pnl.style.visibility = "hidden";
  		            pnl.style.display = "none";
          
  		    },
  
  
   BeginShowToolTip: function (event, diaid) {
  
  		        WebService.GetToolTipText(diaid, this.EndShowToolTip, this.OnError, this.OnTimeOut);
  
  		        this.x = 770;
  		        this.y = event.clientY - 200;
                   clearTimeout(hovertimeout);
                  
  		    },

  
  
  

  • Marked as answer by omerdemir on Apr 01, 2012 08:30 AM