Hover over text to get textbox to appear (& not disappear til mouse is out of bounds)

Lolligirl · 02-08-2013, 03:12 PM

Like in this thread, I'm looking for a script that makes a text box pop up when a user hovers over some text. However, I need the pop up to have buttons and to not disappear when the user moves their cursor from the text, but instead when the user removes the cursor from the bounds of the box that pops up. Here's a mockup of what it will eventually look like:

Will anyone please help me with this?

jmrker · 02-08-2013, 05:36 PM

What / Where is your question or code?

WolfShade · 02-08-2013, 06:12 PM

Odds are the post was SPAM or something else that is contrary to the T&C, and was removed.

I've seen questionable posts from Lolligirl, before. Don't know if it's actually Lolligirl, or Lolligirl's account has been compromised.

VIPStephan · 02-08-2013, 06:23 PM

The first post must have been put in the moderation queue automatically after Lolligirl has edited it so it wasn’t visible to the genera public. Can’t see any spam in it, though.

Lolligirl · 02-08-2013, 11:11 PM

What the heck, guys? I had posted this thread before and my post got deleted or something after I edited it (was no different from the first post now), so I posted another one. My question is in the first post ("I'm looking for a script that makes a text box pop up when a user hovers over some text"). You haven't seen me before because I just now created an account. :/

Quite the warm welcome; forget it.

VIPStephan · 02-08-2013, 11:20 PM

Lolligirl, as I said, the automatic spam filter has somehow automatically “unapproved” your post after you edited it – it’s a little sensitive if people with a post count lower than six post links and/or images because that’s also typical for spammers. Sometimes, however, this triggers false postitives when a user is a legitimate member. No need to get angry.

jmrker · 02-09-2013, 05:00 AM

If 'Lolligirl' is still around, see how close this comes to your request.
Specifically see the second of three underlined tips.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Untitled </title>
<script type="text/javascript">
function $_(IDS) { return document.getElementById(IDS); }

// From: http://txt.binnyva.com/2007/06/find-elements-position-using-javascript/
function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    curleft = obj.offsetLeft
    curtop = obj.offsetTop
    while (obj = obj.offsetParent) {
      curleft += obj.offsetLeft
      curtop += obj.offsetTop
    }
  }
  return [curleft,curtop];
}

function tip(IDS,flag,info) {
  if (flag) {
    var tarr = findPos(info);  // el.innerHTML += '<p>'+tarr[0]+':'+tarr[1];
    $_(IDS).style.display = 'block';
    $_(IDS).style.left = (tarr[0]+10)+'px';
    $_(IDS).style.top = (tarr[1]+25)+'px';
  } else { $_(IDS).style.display = 'none'; }
}
</script>

<style type="text/css">
 .ttip { display:none; position:absolute; z-index:10;
         background-color:#ffff00; border:3px solid blue; }

 span { text-decoration:underline; background-color:lime; }
 li { list-style-type:none; }
</style>

</head>
<body>
<div style="width:400px">
 Ipsum <div style="display:inline;font-size:1.5em;font-weight:bold" title="Hot Title Tip">lorem dolor</div> sit amet, 
  <span onmouseover="tip('Sced',true,this)" onmouseout="tip('Sced',false)" >Schedule</span>
 consectetuer adipiscing elit. Mauris magna. 
  <span onclick="return false" onmouseover="tip('Mail',true,this)"> Forums </span>
 Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
  <span onClick="Toggle('MainTable');Toggle('FunTable');return false"
    onmouseover="tip('Diversion',true,this)" onmouseout="tip('Diversion',false)" > 
   <a href="http://www.punoftheday.com/">Fun stuff link</a> </span>
 convallis, sagittis vitae, convallis sit amet, lectus.
</div>

  <div id="Sced" class="ttip">Similar to title="something" in link</div>
  <div id="Mail" class="ttip" style="width:250px;text-align:center" onclick="tip('Mail',false)">
    <img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" style="height:100px; width:75px;float:left;">    
    <div style="display:inline;font-size:1.5em">Title of popup</div>
    <div style="display:inline;float:right;background-color:lime">Close</div>
    <br style="clear:both">
    <a href="http://www.webdeveloper.com">Webdeveloper.com</a><br>
    <a href="http://www.codingforums.com">CodingForums.com</a><br>
    <a href="http://www.dreamincode.net">DreamInCode.net</a><br>
  </div>
  <div id="Diversion" class="ttip">Diversions page</div>

</body>
</html>

Lolligirl · 02-09-2013, 05:04 PM

Quote:

Originally Posted by jmrker

If 'Lolligirl' is still around, see how close this comes to your request.
Specifically see the second of three underlined tips.
(snip)

It comes very close, thanks! There's only one main difference: is there a way to have the second popup close when my cursor is outside of that popup bounding box instead of having to click on "Close"?

jmrker · 02-09-2013, 05:58 PM

Closer?

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Untitled </title>
<script type="text/javascript">
function $_(IDS) { return document.getElementById(IDS); }

// From: http://txt.binnyva.com/2007/06/find-elements-position-using-javascript/
function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    curleft = obj.offsetLeft
    curtop = obj.offsetTop
    while (obj = obj.offsetParent) {
      curleft += obj.offsetLeft
      curtop += obj.offsetTop
    }
  }
  return [curleft,curtop];
}

function tip(IDS,flag,info) {
  if (flag) {
    var tarr = findPos(info);  // el.innerHTML += '<p>'+tarr[0]+':'+tarr[1];
    $_(IDS).style.display = 'block';
    $_(IDS).style.left = (tarr[0]+10)+'px';
    $_(IDS).style.top = (tarr[1]+25)+'px';
  } else { $_(IDS).style.display = 'none'; }
}
</script>

<style type="text/css">
 .ttip { display:none; position:absolute; z-index:10;
         background-color:#ffff00; border:3px solid blue; }

 span { text-decoration:underline; background-color:lime; }
</style>

</head>
<body>
<div style="width:50%">
 Ipsum
 <div style="display:inline;font-size:1.5em;font-weight:bold" title="Hot Title Tip">lorem dolor</div> sit amet, 

 <span
  onmouseover="tip('Sced',true,this)"
  onmouseout="tip('Sced',false)">Schedule</span>
 consectetuer adipiscing elit. Mauris magna. 
 Curabitur eros justo, malesuada 

 <span onclick="return false"
  onmouseover="tip('Mail',true,this)"> Forums </span>
 Suspendisse accumsan elit non tellus.

 <span
   onClick="Toggle('FunTable');return false"
   onmouseover="tip('Diversion',true,this)"
   onmouseout="tip('Diversion',false)" > 
   <a href="http://www.punoftheday.com/">Fun stuff link</a> </span>
 convallis, sagittis vitae, convallis sit amet, lectus.
</div>

<div id="Sced" class="ttip">Similar to title="something" in link</div>

<div id="Mail" class="ttip" style="width:250px;text-align:center"
 onmouseover="$_('Mail').style.display='block'"
 onmouseout="$_('Mail').style.display='none'">
  <img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" style="height:100px; width:75px;float:left;">    
  <div style="display:inline;font-size:1.5em">Title of popup</div>
  <br style="clear:both">
  <a href="http://www.webdeveloper.com">Webdeveloper.com</a><br>
  <a href="http://www.codingforums.com">CodingForums.com</a><br>
  <a href="http://www.dreamincode.net">DreamInCode.net</a><br>
</div>

<div id="Diversion" class="ttip">Diversions page</div>

</body>
</html>

Lolligirl · 02-10-2013, 04:54 PM

Precisely what I needed. Thank you so much!

jmrker · 02-11-2013, 12:50 AM

Quote:

Originally Posted by Lolligirl

Precisely what I needed. Thank you so much!

Your're most welcome.
Happy to help.
Good Luck!