Solved

jquery tooltip styling

Posted on 2013-05-15
1
474 Views
Last Modified: 2013-05-15
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:

my asp page

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.
0
Comment
Question by:maqskywalker
1 Comment
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39169834
$(function () { $(document).tooltip({
tooltipClass: "yourclass",
position: {
        my: "center bottom-50px",
        at: "center top"
    }
}); });    

<style>
.yourclass {
background:yellow
}
</style>
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now