Solved

jquery tooltip styling

Posted on 2013-05-15
1
492 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Get Actionable Data from Your Monitoring Solution

Your communication platform is only as good as the relevance of the information you send. Ensure your alerts get to the right people every time with actionable responses. Create escalation rules that ensure everyone follows the process and nothing is left to chance.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to dynamically set the form action using jQuery.

696 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