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
Solved

Hover Box with text

Posted on 2011-02-17
14
1,204 Views
Last Modified: 2012-05-11
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
0
Comment
Question by:overcolor
  • 6
  • 4
  • 2
  • +2
14 Comments
 
LVL 18

Expert Comment

by:Jerry Miller
ID: 34922954
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" />
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34923051
do you want to show textbox as tooltip or a few sentences as tooltip?

please clarify
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34923068
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

Author Comment

by:overcolor
ID: 34923360
@jmiller1979 I'm using Coldfusion,
@gurvinder372: I would like a text box?
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34923411
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

0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 250 total points
ID: 34923444
try this code
<!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;
		}
		img
		{
			height:50px;
			width:50px;
		}
	</style>
	
	
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			$('img, .text').hover(function(e)
			{
				var x = e.pageX;
				var y = e.pageY;
				$(".tooltip").css("top", y);
				$(".tooltip").css("left", x);
				$(".tooltip").show();
				$(".tooltip input").focus();
			});
			$('img, .text').mouseout(function(e)
			{
				$(".tooltip").hide();
			});

			$(".tooltip input").blur(function(){
				$(".tooltipText").html($(this).val()):
			});
		});
	</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>
	<div class="tooltipText"></div>
</BODY>
</HTML>

Open in new window

0
 

Author Comment

by:overcolor
ID: 34923462
@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..
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34923515
@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.
0
 
LVL 14

Expert Comment

by:quizwedge
ID: 34923972
In case you're looking for a ColdFusion specific solution, check out http://mobile.experts-exchange.com/Q_24199070.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.)
0
 
LVL 3

Assisted Solution

by:dagaz_de
dagaz_de earned 250 total points
ID: 34926669
try cftooltip, its a cool coldfusion tag.

<!--- These variables could be set dynamically --->
<cfset theItem="left-handed & other specialty wrenches">
<cfset theImage="lhbwrench.jpg">
 
<!--- The theItem string has an ampersand, so you must URL-encode it. --->
<cftooltip sourceForTooltip="tiptext.cfm?itemid=#URLEncodedFormat(theItem)#">
    <cfoutput>  
        <b>Try this one!</b>
        <img src="#theImage#" />
    </cfoutput>
</cftooltip>

The tiptext.cfm page could have a single CFML tag:

<cfoutput><b> Click to find more about #URL.itemid# </b></cfoutput>

if you want a cool html/javascript solution try wztooltip:

http://www.himmera.com/Javascript_scripts/Tooltip_Javascript_example_html_css_js_tooltips_JQuery-Tooltip_javascript_and_CSS_JavaScript,_DHTML_Tooltips_WalterZorn.com__9.htm

0
 

Author Comment

by:overcolor
ID: 34928348
I will try these codes out tonight thank you,
0
 

Author Comment

by:overcolor
ID: 34928669
@gurvinder372:

Im getting an syntax error  on line 47?
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34928844
no its not, i have tested the code before posting
0
 
LVL 14

Expert Comment

by:quizwedge
ID: 34934755
Did you try my or @dagaz_de's ColdFusion based solution?
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Mobile page Scrolling down when refreshing 4 61
add image on html mail 6 26
Can't get container centered 4 24
styling bootstrap grid system with CSS 2 37
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

792 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