Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Location
    Wisconsin
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Hover over text to get a text box appear

    I've been looking around for some time now and can't seem to find anything for what I'd like. I want it to be that when you hover over a segment of text, a box will appear with what in hopes will be more text. And then that box move away if you move your cursor.

  • #2
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by Janek View Post
    I've been looking around for some time now and can't seem to find anything for what I'd like. I want it to be that when you hover over a segment of text, a box will appear with what in hopes will be more text. And then that box move away if you move your cursor.
    Not sure if this is what you want, but title="" provides text in a pop-up window... like this for example:

    Code:
    <span title="Hey you are hovering over me!">This text is on the web page</span>
    On the web page, you will see "This text is on the web page". If you hover your mouse over that text, a little (probably light yellow) window will pop up that says "Hey you are hovering over me!".

    Hope this is what you were looking for.....

    -- Roger
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,757
    Thanks
    23
    Thanked 546 Times in 545 Posts
    You really don't need js to do this. Thy this simple html solution.

    <p style="cursor:Pointer;" title="Find out more about James Bond and his line of work">My name is James Bond</p>

    Just 2 min late.. Had a problem with the colon p make a face and can't find out how to shut off the faces..
    Last edited by sunfighter; 01-10-2011 at 08:28 PM.

  • #4
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by sunfighter View Post
    You really don't need js to do this. Thy this simple html solution.
    I think the OP assumed that JS was involved in doing title="". Now he knows!
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • #5
    Regular Coder olidenia's Avatar
    Join Date
    Oct 2009
    Location
    Sitting In Front Of A Screen
    Posts
    110
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Something like this?

    This is a TOOL TIP javascript obtaind easily by doing a search on google, to be specific: www.dynamicdrive.com there are lots of cool menus and efects there. NOT MY WEBSITE!

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
      <title></title>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <meta name="description" content="" />
      <meta name="keywords" content="" />
      <style type="text/css">
    
    #dhtmltooltip{
    position: absolute;
    width: 150px;
    border: 2px solid black;
    padding: 2px;
    background-color: lightyellow;
    visibility: hidden;
    z-index: 100;
    /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
    }
    
    </style>
    
    <div id="dhtmltooltip"></div>
    
    <script type="text/javascript">
    
    /***********************************************
    * Cool DHTML tooltip script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var offsetxpoint=-60 //Customize x offset of tooltip
    var offsetypoint=20 //Customize y offset of tooltip
    var ie=document.all
    var ns6=document.getElementById && !document.all
    var enabletip=false
    if (ie||ns6)
    var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function ddrivetip(thetext, thecolor, thewidth){
    if (ns6||ie){
    if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
    if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
    tipobj.innerHTML=thetext
    enabletip=true
    return false
    }
    }
    
    function positiontip(e){
    if (enabletip){
    var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
    var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
    //Find out how close the mouse is to the corner of the window
    var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
    var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
    
    var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
    
    //if the horizontal distance isn't enough to accomodate the width of the context menu
    if (rightedge<tipobj.offsetWidth)
    //move the horizontal position of the menu to the left by it's width
    tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
    else if (curX<leftedge)
    tipobj.style.left="5px"
    else
    //position the horizontal position of the menu where the mouse is positioned
    tipobj.style.left=curX+offsetxpoint+"px"
    
    //same concept with the vertical position
    if (bottomedge<tipobj.offsetHeight)
    tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
    else
    tipobj.style.top=curY+offsetypoint+"px"
    tipobj.style.visibility="visible"
    }
    }
    
    function hideddrivetip(){
    if (ns6||ie){
    enabletip=false
    tipobj.style.visibility="hidden"
    tipobj.style.left="-1000px"
    tipobj.style.backgroundColor=''
    tipobj.style.width=''
    }
    }
    
    document.onmousemove=positiontip
    
    </script>
    </head>
    <body>
    <a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";
     onMouseout="hideddrivetip()">Search Engine</a>
    </body>
    </html>
    Last edited by olidenia; 01-10-2011 at 08:46 PM.
    It's easy once you know how...

  • #6
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by olidenia View Post
    Something like this?
    That's cute and all, but if the OP didn't know about title="" then the code you posted will be completely overwhelming.
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • #7
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    Quote Originally Posted by Janek View Post
    I've been looking around for some time now and can't seem to find anything for what I'd like. I want it to be that when you hover over a segment of text, a box will appear with what in hopes will be more text. And then that box move away if you move your cursor.
    I am assuming you are looking for a hide/show div or paragraph. When a user's cursor is over some text or a button the paragraph shows, and when a user's cursor is away from the same text or button, the paragraph disappears. This one will work with onmouseover/onmouseout & onclick - feel free to ask any questions.

    THE CODE:
    Code:
    <!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>
    <title>Hide/Show</title>
    <style type="text/css">
    	a {
    	 text-decoration: none;
    	 outline: none;
    	}
    	div#page {
    		margin: 60px auto;
    		border: 1px solid #dedede;
    		width: 910px;
    	}
    	.TogWrap {
    		width: 400px;
    		padding: 22px;
    	}
    	#togTrigger {
    		border: 1px solid #bebebe;
    		padding: 7px 8px;
    		background: #df7623;
    		color: #fff;
    	}
    	.togContent  {
    		margin-top: 9px;
    		border: 1px solid #bebebe;
    		padding: 16px 10px 10px 10px;
    		background: #ededed;
    	}
    </style>
    <script type="text/javascript">
    <!-- HIDE FROM OLD BROWSERS
    /* <![CDATA[ */
    
    	var oVTog = {
    	toggle: function (el) {
    			oVTog.container = el.parentNode;
    			oVTog.para = oVTog.container.getElementsByTagName('p')[0];	
    			oVTog.para.style.display = "none";
    
    			el.onmouseover = function () {
    						  oVTog.para.style.display = '';
    						  return false;
    					};
    			el.onmouseout = function () {
    						  oVTog.para.style.display = 'none';
    						  return false;
    					};
    			el.onclick = function () {
    						  oVTog.para.style.display = oVTog.para.style.display == 'none' ? '' : 'none';
    						  return false;
    					};
    			}
    	};
    	window.onload = function () {
    		var l = document.getElementById('togTrigger');
    		oVTog.toggle(l); 
    	};
    
    /* ]]> */
    //END HIDING -->
    </script>
    </head>
    <body id="bd">
    
    			
    
    		<div id="theTog" class="TogWrap">
    			<a href="#" id="togTrigger">Lorem ipsum One</a>
    			<p class="togContent">
    			  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    			  Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    			  convallis, sagittis vitae, convallis sit amet, lectus.
    			</p>
    		</div>
    
    </div>
    
    </body>
    </html>
    If this is not what you are looking for, then probably you are looking for a tooltip. If it is a tooltip that you are looking for, then you can find many example by searching for "javascript tooltips" or ""JQuery tooltips".

    I hope this helps!
    Last edited by oVTech; 01-10-2011 at 09:07 PM.

  • Users who have thanked oVTech for this post:

    Janek (01-11-2011)

  • #8
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    Quote Originally Posted by olidenia View Post
    Something like this?

    This is a TOOL TIP javascript obtaind easily by doing a search on google, to be specific: www.dynamicdrive.com there are lots of cool menus and efects there. NOT MY WEBSITE!
    Olidenia the code you posted does not seem to work. All you get is a link and nothing happens on any mouse events other than click which just follows the link (I'm just curious ). IE gives many errors. And as it was told above, the code seems way too complicated. PEACE

  • #9
    Regular Coder olidenia's Avatar
    Join Date
    Oct 2009
    Location
    Sitting In Front Of A Screen
    Posts
    110
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Ups!!! the code was in between the wrong tags, try now!

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
      <title></title>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <meta name="description" content="" />
      <meta name="keywords" content="" />
    <style type="text/css">
    
    #dhtmltooltip{
    position: absolute;
    width: 150px;
    border: 2px solid black;
    padding: 2px;
    background-color: lightyellow;
    visibility: hidden;
    z-index: 100;
    /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
    }
    
    </style>
    </head>
    <body>
    
    <div id="dhtmltooltip"></div>
    
    <script type="text/javascript">
    
    /***********************************************
    * Cool DHTML tooltip script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var offsetxpoint=-60 //Customize x offset of tooltip
    var offsetypoint=20 //Customize y offset of tooltip
    var ie=document.all
    var ns6=document.getElementById && !document.all
    var enabletip=false
    if (ie||ns6)
    var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function ddrivetip(thetext, thecolor, thewidth){
    if (ns6||ie){
    if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
    if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
    tipobj.innerHTML=thetext
    enabletip=true
    return false
    }
    }
    
    function positiontip(e){
    if (enabletip){
    var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
    var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
    //Find out how close the mouse is to the corner of the window
    var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
    var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
    
    var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
    
    //if the horizontal distance isn't enough to accomodate the width of the context menu
    if (rightedge<tipobj.offsetWidth)
    //move the horizontal position of the menu to the left by it's width
    tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
    else if (curX<leftedge)
    tipobj.style.left="5px"
    else
    //position the horizontal position of the menu where the mouse is positioned
    tipobj.style.left=curX+offsetxpoint+"px"
    
    //same concept with the vertical position
    if (bottomedge<tipobj.offsetHeight)
    tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
    else
    tipobj.style.top=curY+offsetypoint+"px"
    tipobj.style.visibility="visible"
    }
    }
    
    function hideddrivetip(){
    if (ns6||ie){
    enabletip=false
    tipobj.style.visibility="hidden"
    tipobj.style.left="-1000px"
    tipobj.style.backgroundColor=''
    tipobj.style.width=''
    }
    }
    
    document.onmousemove=positiontip
    
    </script>
    <a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";
     onMouseout="hideddrivetip()">Search Engine</a>
     
     <a href="http://yahoo.com" onMouseover="ddrivetip('Yahoo\'s Site', 'yellow', 250)";
     onMouseout="hideddrivetip()">Yahoo</a>
    </body>
    </html>
    It's easy once you know how...

  • Users who have thanked olidenia for this post:

    Janek (01-11-2011)

  • #10
    New to the CF scene
    Join Date
    Jan 2011
    Location
    Wisconsin
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    that'd be good for tagging something with some basic information, like the alt text of a photo. But otherwise what I'm looking for is basically a new window that appears when you hover over.

  • #11
    New to the CF scene
    Join Date
    Jan 2011
    Location
    Wisconsin
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Krupski View Post
    That's cute and all, but if the OP didn't know about title="" then the code you posted will be completely overwhelming.
    What they gave me was yes out of my leauge, but when I plugged it into notepad and opened it, it didn't even work. I'm otherwise fully capable of taking code apart and seeing what part does what and altering to my liking. So it really doesn't matter to me what is given.

  • #12
    New to the CF scene
    Join Date
    Jan 2011
    Location
    Wisconsin
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by oVTech View Post
    I am assuming you are looking for a hide/show div or paragraph. When a user's cursor is over some text or a button the paragraph shows, and when a user's cursor is away from the same text or button, the paragraph disappears. This one will work with onmouseover/onmouseout & onclick - feel free to ask any questions.

    THE CODE:
    Code:
    <!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>
    <title>Hide/Show</title>
    <style type="text/css">
    	a {
    	 text-decoration: none;
    	 outline: none;
    	}
    	div#page {
    		margin: 60px auto;
    		border: 1px solid #dedede;
    		width: 910px;
    	}
    	.TogWrap {
    		width: 400px;
    		padding: 22px;
    	}
    	#togTrigger {
    		border: 1px solid #bebebe;
    		padding: 7px 8px;
    		background: #df7623;
    		color: #fff;
    	}
    	.togContent  {
    		margin-top: 9px;
    		border: 1px solid #bebebe;
    		padding: 16px 10px 10px 10px;
    		background: #ededed;
    	}
    </style>
    <script type="text/javascript">
    <!-- HIDE FROM OLD BROWSERS
    /* <![CDATA[ */
    
    	var oVTog = {
    	toggle: function (el) {
    			oVTog.container = el.parentNode;
    			oVTog.para = oVTog.container.getElementsByTagName('p')[0];	
    			oVTog.para.style.display = "none";
    
    			el.onmouseover = function () {
    						  oVTog.para.style.display = '';
    						  return false;
    					};
    			el.onmouseout = function () {
    						  oVTog.para.style.display = 'none';
    						  return false;
    					};
    			el.onclick = function () {
    						  oVTog.para.style.display = oVTog.para.style.display == 'none' ? '' : 'none';
    						  return false;
    					};
    			}
    	};
    	window.onload = function () {
    		var l = document.getElementById('togTrigger');
    		oVTog.toggle(l); 
    	};
    
    /* ]]> */
    //END HIDING -->
    </script>
    </head>
    <body id="bd">
    
    			
    
    		<div id="theTog" class="TogWrap">
    			<a href="#" id="togTrigger">Lorem ipsum One</a>
    			<p class="togContent">
    			  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    			  Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    			  convallis, sagittis vitae, convallis sit amet, lectus.
    			</p>
    		</div>
    
    </div>
    
    </body>
    </html>
    If this is not what you are looking for, then probably you are looking for a tooltip. If it is a tooltip that you are looking for, then you can find many example by searching for "javascript tooltips" or ""JQuery tooltips".

    I hope this helps!
    Thanks oVTech! Between yours and olidenia's fixed code, I can go from there, they both are exactly what I'm looking for, and yours is perfect for what I need.

  • #13
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    For OVTech

    Quote Originally Posted by oVTech View Post
    I am assuming you are looking for a hide/show div or paragraph. When a user's cursor is over some text or a button the paragraph shows, and when a user's cursor is away from the same text or button, the paragraph disappears. This one will work with onmouseover/onmouseout & onclick - feel free to ask any questions.

    THE CODE:
    Code:
    <!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>
    <title>Hide/Show</title>
    <style type="text/css">
    	a {
    	 text-decoration: none;
    	 outline: none;
    	}
    	div#page {
    		margin: 60px auto;
    		border: 1px solid #dedede;
    		width: 910px;
    	}
    	.TogWrap {
    		width: 400px;
    		padding: 22px;
    	}
    	#togTrigger {
    		border: 1px solid #bebebe;
    		padding: 7px 8px;
    		background: #df7623;
    		color: #fff;
    	}
    	.togContent  {
    		margin-top: 9px;
    		border: 1px solid #bebebe;
    		padding: 16px 10px 10px 10px;
    		background: #ededed;
    	}
    </style>
    <script type="text/javascript">
    <!-- HIDE FROM OLD BROWSERS
    /* <![CDATA[ */
    
    	var oVTog = {
    	toggle: function (el) {
    			oVTog.container = el.parentNode;
    			oVTog.para = oVTog.container.getElementsByTagName('p')[0];	
    			oVTog.para.style.display = "none";
    
    			el.onmouseover = function () {
    						  oVTog.para.style.display = '';
    						  return false;
    					};
    			el.onmouseout = function () {
    						  oVTog.para.style.display = 'none';
    						  return false;
    					};
    			el.onclick = function () {
    						  oVTog.para.style.display = oVTog.para.style.display == 'none' ? '' : 'none';
    						  return false;
    					};
    			}
    	};
    	window.onload = function () {
    		var l = document.getElementById('togTrigger');
    		oVTog.toggle(l); 
    	};
    
    /* ]]> */
    //END HIDING -->
    </script>
    </head>
    <body id="bd">
    
    			
    
    		<div id="theTog" class="TogWrap">
    			<a href="#" id="togTrigger">Lorem ipsum One</a>
    			<p class="togContent">
    			  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    			  Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    			  convallis, sagittis vitae, convallis sit amet, lectus.
    			</p>
    		</div>
    
    </div>
    
    </body>
    </html>
    If this is not what you are looking for, then probably you are looking for a tooltip. If it is a tooltip that you are looking for, then you can find many example by searching for "javascript tooltips" or ""JQuery tooltips".

    I hope this helps!


    Hi OVTech i've used your code and it is great... just that I do not now how to add multiple buttons and make them work under the same hover effect... Can you pleas give me an answer on this quote?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •