View Attractive Tool Tip on Mouseover with use of JQuery

First of all add below code inside the <head> tag ::

<%--Script to be added for tooltip starts here--%>
<link rel="Stylesheet" href="../Styles/jquery-ui.css" />
  <script type="text/javascript" src="../Scripts/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-ui.js"></script>
  <script type="text/javascript">
      $(function () {
          $(document).tooltip();
      });
  </script>
  <style type="text/css">
  label {
    display: inline-block;
    width: 3em;
  }
  </style>
  <%--Script to be added for tooltip ends here--%>


Then inside body write following code::
...
.
.
<table>
<tr>
<td>
          Enter your Name: <asp:Image src="../images/icon-help.png" ID="imgNameHelp"  title="Enter Name Here. More Text Here.  More Text Here.  More Text Here. More Text Here" runat="server"/>
  </td>
</tr>
</table>


The attribute title is important and what you have written inside head tag will only make a tool tip for your control..It will work for all controls almost, just use title tag.

Links for downloading needed .css and .js files (Go to the links and Save files as it is and add it to your projects)::

http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css
http://code.jquery.com/jquery-1.9.1.js
http://code.jquery.com/ui/1.10.4/jquery-ui.js

Comments

Popular posts from this blog

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

Dumps for Microsoft Dynamics CRM MB2-703 Practice Exam Questions Free

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

Show GridView row details in tooltip on mouseover with jQuery using asp.net inside GridView in c#

go to top image