How to show Tooltip on TAB click. RSS

• • Reply
  

  hspatil

  Member

  98 Points

  159 Posts

  How to show Tooltip on TAB click.

  Mar 02, 2012 05:28 AM|LINK

  Dear All,

  I am trying following code for showing the ToolTip on mouseover event.

  I want to show ToolTip on TAB click.

  Can anybody please tell me how to do this ?

  <table>           

  <tr>               

  <td>                   

  <asp:TextBox ID="TextBox1" runat="server" ToolTip="Enter value in textbox1"></asp:TextBox>               

  </td>           

  </tr>           

  <tr>               

  <td>                   

  <asp:TextBox ID="TextBox2" runat="server" ToolTip="Enter value in textbox2"></asp:TextBox>               

  </td>           

  </tr>           

  <tr>               

  <td>                   

  <asp:TextBox ID="TextBox3" runat="server" ToolTip="Enter value in textbox3"></asp:TextBox>               

  </td>           

  </tr>       

  </table>

   

  Thanks and Regard's

  Harish Patil

  • Moved by Mikesdotnetting on Mar 03, 2012 04:46 PM
• • Reply
  

  vsdev

  Contributor

  2230 Points

  453 Posts

  Re: How to show Tooltip on TAB click.

  Mar 02, 2012 05:45 AM|LINK

  I want to show ToolTip on TAB click - means? Try adding Title attribute for the TAB

  Please remember to click “Mark as Answer” on the post that helps you.
  Blog: dotnetthoughts
  Download Capture It Plus
• • Reply
  

  Subramanyam....

  Member

  122 Points

  29 Posts

  Re: How to show Tooltip on TAB click.

  Mar 02, 2012 05:53 AM|LINK

  What do you mean by TAB click exactly??

  Please "Mark as answer" if it helps!!!
• • Reply
  

  hspatil

  Member

  98 Points

  159 Posts

  Re: How to show Tooltip on TAB click.

  Mar 02, 2012 06:06 AM|LINK

  Dear Friend,

  TAB click means the TAB Key Press of a textbox.

  I have cursor pointer on TextBox1, when i will press the TAB key from keybord cursor goes on to second TextBox2. So that time it's shows the ToolTip.

  Just like it's showing now onmouseover event of TextBox.

   

  Thanks and Regard's

  Harish Patil

  • Edited by hspatil on Mar 02, 2012 06:21 AM
• • Reply
  

  vsdev

  Contributor

  2230 Points

  453 Posts

  Re: How to show Tooltip on TAB click.

  Mar 02, 2012 07:25 AM|LINK

  What is tooltip? It is for mouse not for keyboard events. - http://en.wikipedia.org/wiki/Tooltip

  Please remember to click “Mark as Answer” on the post that helps you.
  Blog: dotnetthoughts
  Download Capture It Plus
• • Reply
  

  ramiramilu

  All-Star

  98033 Points

  14516 Posts

  Re: How to show Tooltip on TAB click.

  Mar 03, 2012 06:48 AM|LINK

  hspatil

  I want to show ToolTip on TAB click.

  use this jquery plugin - http://jquery.bassistance.de/tooltip/demo/ 

  and then in jquery you got to identify TAB press - http://praveenbattula.blogspot.in/2009/11/how-to-detect-tab-key-is-pressed-in.html on keyboard and show the tooltip div and simultaneously hide it for all other...

  Thanks,

  Website
  JumpStart
  • Marked as answer by Frank Jiang - MSFT on Mar 12, 2012 10:57 AM
• • Reply
  

  lizareay

  Member

  170 Points

  53 Posts

  Re: How to show Tooltip on TAB click.

  Mar 03, 2012 10:18 AM|LINK

  Hi,

  You can't add tooltip on click event.

  It'll appear only on mouse hover.

  You can use custom tooltip using JQuery.

• • Reply
  

  UjjwalMeshra...

  Participant

  1179 Points

  293 Posts

  Re: How to show Tooltip on TAB click.

  Mar 03, 2012 03:27 PM|LINK

  hspatil

  I have cursor pointer on TextBox1, when i will press the TAB key from keybord cursor goes on to second TextBox2. So that time it's shows the ToolTip.

  Hi 

  I think you want to show the tooltip when textbox gets focus. If so, you need to use jquery plugin. refer the link

  http://craigsworks.com/projects/qtip/docs/api/

  After downloading required file add below script in your page

  $(document).ready(function () {
     
      $.fn.qtip.styles.mystyle1 = { // Last part is the name of the style
          width: 300,
          background: '#A2D959',
          color: 'black',
          textAlign: 'left',
          border: {
              width: 7,
              radius: 5,
              color: '#A2D959'
          },
          tip: 'bottomLeft'
          // Inherit the rest of the attributes from the preset style
      }
      $("#textbox1").qtip({
  
          content: ' tooltip text here',
          position: { corner: { target: 'topRight', tooltip: 'bottomleft'} },
          style: 'mystyle1',
  
          show: 'focus',
          hide: 'blur'
  
      });
  $("#textbox2").qtip({
  
          content: ' tooltip text here',
          position: { corner: { target: 'topRight', tooltip: 'bottomleft'} },
          style: 'mystyle1',
  
          show: 'focus',
          hide: 'blur'
  
      });
   });

  cheers

  When a eye with Vision and a heart with passion achieves his dream people call him genius.
  
  Regards
  • Marked as answer by Frank Jiang - MSFT on Mar 12, 2012 10:57 AM