Solved

How do I make plain text have the alt=Description on mouseover like a image has

Posted on 2009-04-04
6
235 Views
Last Modified: 2013-12-24
How do I make plain text have the alt=Description on mouseover without adding a image.
Like a image.

<img src="images/lens.gif" alt="Click to view plan details" width="18" height="18">

On mouse over you see the alt text in a little balloon by the pointer.

How is that done with plain text wothout making it a link or a image.
0
Comment
Question by:LeadCo
  • 4
  • 2
6 Comments
 
LVL 27

Accepted Solution

by:
azadisaryev earned 500 total points
ID: 24070049
if you are on cf8, you can do it as easy as

<p>this is some <cftooltip tooltip="with a tooltip created using <cftooltip> tag!"><u>text</u></cftooltip></p>

Azadi
0
 

Author Comment

by:LeadCo
ID: 24070065
Yes it works great in CF8.  Is there a way to make it stay up as long as they have their pointer on it. It fades out a bit fast and I am showing some lengthy definitions for insurance terms. Is their a way to make it stay visible till moved.
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24070076
and if you are not on cf8 yet (or even if you are!), check out these 2 tooltip plug-ins for jQuery javascript library. they both are great, easy to setup and customize, and allow you a lot more control over the look of the tooltip than <cftooltip> tag:

http://jquery.bassistance.de/tooltip/demo/
http://www.codylindley.com/blogstuff/js/jtip/

Azadi
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 27

Expert Comment

by:azadisaryev
ID: 24070095
> Is there a way to make it stay up as long as they have their pointer on it

<cftooltip> tag has some useful attributes you can sue:
autoDismissDelay - The number of milliseconds between the time when the user moves the mouse pointer
over the component (and leaves it there) and when the tool tip disappears. (defaults to 5000 = 5 seconds)

hideDelay - The number of milliseconds to delay between the time when the user moves the mouse
pointer away from the component and when the tool tip disappears. (defaults to 250)

showDelay - The number of milliseconds to delay between the time when the user moves the mouse
over the component and when the tool tip appears. (defaults to 200)

sourceForTooltip - The URL of a page with the tool tip contents. The page can include HTML markup to
control the format, and the tip can include images. If you specify this attribute, an animated icon appears with the text "Loading..." while the tip is being loaded.

check out cfml reference manual for other attributes.
but, really, do check out those jquery plug-ins - they will give you A LOT more control over the tooltips!

Azadi
0
 

Author Comment

by:LeadCo
ID: 24071627
The jquery was the ticket thanks. Since it was really another question i have it open. Copy comments in there if you want and i will award points. i will close it later today.
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24071642
no worries, i am not here for the points, really...
glad i could help!

Azadi
0

Featured Post

Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

Question has a verified solution.

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

Suggested Solutions

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
The purpose of this video is to demonstrate how to connect a WordPress website to Google Analytics. This will be demonstrated using a Windows 8 PC Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php :…
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…

809 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