asked on

Hover Box with text

I would like when my website visitors hover over a images or text; a text box pops up,
Im trying to create a informational box about the section/field of the form they are on.
The information in the box will be about 5 sentences long.

Please help me with this

Jerry Miller

If your website is ASP, there is a tooltip property for most controls. Here is one for a TextBox.

<asp:TextBox id="txtExample" Text="ToolTip Example" runat="server"
ToolTip="This is an example-textbox" />

Gurvinder Pal Singh

do you want to show textbox as tooltip or a few sentences as tooltip?

please clarify

Gurvinder Pal Singh

you can use jquery tooltip plugin
http://docs.jquery.com/Plugins/Tooltip
http://jquery.bassistance.de/tooltip/demo/

D F

ASKER

@jmiller1979 I'm using Coldfusion,
@gurvinder372: I would like a text box?

Gurvinder Pal Singh

try this

But why did you wanted to show the textbox as tooltip at hover, since you may never be able to use the same

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		.text
		{
			font:15px red arial;
		}
		.tooltip
		{
			border:2px solid red;
			padding:2px;
			width:150px;
			display:none;
			position:absolute;
		}
		.tooltip input
		{
			width:150px;
		}
	</style>
	
	
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			$('img, .text').mousemove(function(e)
			{
				var x = e.pageX;
				var y = e.pageY;
				$(".tooltip").css("top", y);
				$(".tooltip").css("left", x);
				$(".tooltip").show();
			});
			$('img, .text').mouseout(function(e)
			{
				$(".tooltip").hide();
			});
		});
	</script>

</HEAD>

<BODY>
	<div class="container">
		Put the cursor on the image <img src="logo.jpg"/>  <br/>

		Put the cursor on the image <img src="logo.jpg"/>  <br/>

		Put the cursor on the image <img src="logo.jpg"/>  <br/>

		Put your cursor on <span class="text">THIS</span>

	</div>
	<div class="tooltip"><input type="text" id="tooltipText"/></div>
</BODY>
</HTML>

Open in new window

ASKER CERTIFIED SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

D F

ASKER

@gurvinder372: what Language is this in?

All I'm trying to do is when a visitor puts the mouse over the "question mark" (image) next to a form field it shows them information on what the field is for..

Gurvinder Pal Singh

@overcolor: this is jquery/html/css

all you need to do is change the selector of that image to appropriate one as per your HTML structure.

quizwedge

In case you're looking for a ColdFusion specific solution, check out http://mobile.experts-exchange.com/questions/24199070/Add-tooltip-to-Coldfusion-cfinput.html There appears to be a tool tip tag that should be able to accomplish what you want.

Otherwise, gurvinder372's solution should work or at least be on a correct track. (I just haven't checked the code for errors.)

SOLUTION