Link to home
Create AccountLog in
Avatar of maqskywalker
maqskywalker

asked on

jquery tooltip styling

Hi experts,

I have a basic asp.net page.

I'm using the jquery library and i'm using the jquery tooltip widget.

My page is called ToolTip2.aspx and this is the code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ToolTip2.aspx.vb" Inherits="jqLibrary.ToolTip2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<style type="text/css">

.TestText1 {font-family: Arial; color: #FF0000; font-size: 12px; font-weight: normal;}

</style>
    
    <%-- referening jquery library --%>
    <link rel="stylesheet" type="text/css" href="Scripts/jquery-ui.css" />

    <script language="javascript" type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
    <script language="javascript" type="text/javascript" src="Scripts/jquery-ui.js"></script>
    
    <%-- tooltip function --%>
    <script language="javascript" type="text/javascript">
        $(function () { $(document).tooltip(); });                 
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
<p></p>
<br />
<br />
<br />
<br />
<br />
<p>
<a href="#" title="Anchor description">Anchor text</a>
<input type="text" title="Input help" />

    <asp:TextBox ID="TextBox1" runat="server" ToolTip="I am a asp TextBox"></asp:TextBox>
</p>
<table width="800" border="1">
  <tr> 
    <td>Column1</td>
    <td>Column2</td>
    <td>Column3</td>
    <td>Column4</td>
  </tr>
  <tr> 
    <td><span class="TestText1" title="This is some tooltip text on a table cell">R2C1</span></td>
    <td>R2C2</td>
    <td>R2C3</td>
    <td>R2C4</td>
  </tr>
</table>

    </div>
    </form>
</body>
</html>

Open in new window


When I run it, it looks like this:

User generated image

If you notice, when you hover over a textbox. The tooltip is white and shows up below the control I hover over.

How do I modify so the background color of the tooltip is yellow instead of white and instead of having the tooltip showing below the control I hover over, I want the tooltip to show up above the control I hover over.
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account