Hover Pop Up With Database Field

ASP Free Forums Sponsor:

May 10th, 2006, 02:08 PM

dcampos

Contributing User

Join Date: Aug 2004

Posts: 250

Time spent in forums: 2 Days 18 h 18 m 46 sec
Reputation Power: 6

Hover Pop Up With Database Field

I would like to use Javascript to create a hover box that will pop up when I move over text. In addition to that, I want this hover box to contain information from a field in a database associated with the text that I am mousing over. Does anyone know of a tutorial that will show me how to do this?

__________________
"We're Gonna Need A Lot More Men." Davy Crockett

June 26th, 2006, 08:02 PM

shamrog12

Newton's Apple Wizard

ASP Free Intermediate (1500 - 1999 posts)

Join Date: Nov 2003

Location: Los Angeles

Posts: 1,662

Time spent in forums: 3 Weeks 2 Days 2 h 43 m 24 sec
Reputation Power: 55

do a google search for Overlib. It can give you the javascript code to do exactly what you're looking for. Instead of having the hover box display text you can just make it display the value from a recordset instead.

__________________
If you found a post of mine helpful, please click on the on my post to add to my reputation.

September 21st, 2006, 08:10 AM

asmoran

ASPFree Know-It-All

Join Date: Aug 2004

Posts: 932

Time spent in forums: 1 Week 2 Days 16 h 32 m 39 sec
Reputation Power: 326

Or you can just use the acronym tag.

Code:

<acronym title="World">Hello</acronym>

I take it you're dynamically adding the text to the page, so just add the title for the acronym as you're creating the text.

September 21st, 2006, 12:21 PM

shamrog12

Newton's Apple Wizard

Join Date: Nov 2003

Location: Los Angeles

Posts: 1,662

Time spent in forums: 3 Weeks 2 Days 2 h 43 m 24 sec
Reputation Power: 55

the only problem with the title attribute is that it doesn't appear immediately. it's a good poor man's overlib

September 22nd, 2006, 05:34 AM

D.O.M.I.N.A.T.O.R

Kingpin contributor

Join Date: Nov 2005

Location: P.E, RSA

Posts: 1,051

Time spent in forums: 1 Week 4 Days 2 h 28 m 18 sec
Reputation Power: 202

Quote:

Originally Posted by shamrog12

the only problem with the title attribute is that it doesn't appear immediately. it's a good poor man's overlib

The best way to achieve this is through CSS. I used it in a ASP.Net datagrid.

Code:

<asp:TemplateColumn>
						<ItemTemplate>
							<a class="info" href="#"><strong><%# DataBinder.Eval(Container.DataItem, "title") %></strong><SPAN><%# DataBinder.Eval(Container.DataItem, "description")%></span></a>
						</ItemTemplate>
					</asp:TemplateColumn>

CSS Code:

Original - CSS Code
<STYLE> a.info { z-index: 24; color: #000; position: relative; text-decoration: none; } a.info:hover { z-index: 25; background-color: #CCC; color:#000; } a.info SPAN { display: none } a.info:hover SPAN { display: block; left: 2em; width: 15em; color: #000; border: #CCC 1px solid; position: absolute; top: 2em; background-color: #D2D8E0; text-align: left; padding:3px; } </STYLE>

 <STYLE>
       a.info {
            z-index: 24; 
            color: #000; 
            position: relative; 
            text-decoration: none;
        }
        a.info:hover {
            z-index: 25; 
            background-color: #CCC;
            color:#000;
        }
        a.info SPAN {
            display: none
        }
        a.info:hover SPAN { 
            display: block; 
            left: 2em; 
            width: 15em; 
            color: #000; 
            border: #CCC 1px solid; 
            position: absolute; 
            top: 2em; 
            background-color: #D2D8E0; 
            text-align: left;
            padding:3px;
        }
    </STYLE>

Jo.

__________________
Fitness & Diet resources

Career Descriptions

Boat Cruises
All code that is posted by me has not been tested, and it should only be interpreted as a guideline to a solution. There is no guarantee that any of my code samples will work as provided, and should be customized to suite the required need.

Viewing: ASP Free Forums > Web Design > Web Layout > Hover Pop Up With Database Field

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump

Free IT White Papers!

Create the Optimal Architecture for your Critical Applications
Warburton's the largest independently owned bakery in the UK faced a number of difficult challenges in providing the most robust yet efficient IT infrastructure for their organization's success. IBM's services combined with their xSeries servers created the perfect platform for their SAP environment with sufficient flexibility, and did so in very time effective fashion.

Five Best Practices for Deploying a Successful Service-Oriented Architecture
This white paper describes the benefits you can expect with SOA, and how IBM can help take your business there.

Gartner Magic Quadrant for Application Delivery Controllers
Gartner summarizes its view on Application Delivery Controllers, evaluates strengths and weaknesses of solutions, and provides Magic Quadrant reporting for a quick comparison across all vendors. Learn from Gartner how you can benefit from an all-in-one device like Citrix NetScaler that delivers the highest levels of availability, performance and security.

Knowledge is Power
What you don't know can hurt you, and is likely costing you money and increasing your security risks during an era of scarce resources. This white paper proposes six key strategies that enterprise security managers can use to improve their network defense posture.

Rationalizing the Multi-Tool Environment
The rationalized multi-tool approach is flexible, scalable and cost effective. It provides the necessary input to the IT service management business processes. It preserves prior investments in monitoring tools, empowers technologists to select the best tools with which to do their jobs, and enhances effective response to incidents.

More Free IT White Papers!