While giving your site some personal touch, you might wish to have hover-over-popups (or "Tooltips") that describe a link or any other HTML element.

While there is a standard way to do that (<a title="Hit this!">a link</a>), you might want to

  • make the popups come up directly without delaying 2 seconds or so because the user wants to know what is behind that link immediately
  • style those popups your own way (this is mine), not that peculiar yellow the browsers use for that... and you want to do it the CSS way.
  • make sure the popup is always positioned within the visible area of the browser, even if you put a lot of content in it.
  • simply use the onmouseover attribute of your (link) elements

I spent some time on this and update it regularly based on user comments (see below). You are invited to "steal" the code!

First, three examples (hover over the links):

some text -- a picture -- a table

This is the HTML I used to make those three examples:

<a onmouseover="nhpup.popup('Lorem ipsum dolor sit ...');" href='somewhere.html'>some text</a>

<a onmouseover="nhpup.popup('Here, a chipmunk: <br/><br/> <img src=&quot;chipmunk.png&quot;/>', {'width': 90});">a picture</a>

<a onmouseover="nhpup.popup($('#hidden-table').html(), {'width': 400});" href='somewhere.html'>a table</a>  

<div id="hidden-table" style="display:none;">
  <table border="1" width="400">
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Hans</td>
      <td>22</td>
    </tr>
    <tr>
      <td>Gretchen</td>
      <td>22</td>
    </tr>
  </table>
</div>

If you're interested to use that code, it's easy. Here's how you do it:

  • You enrich the links in your code like this:
    <a onmouseover="nhpup.popup('click to see all administration options');" href="index.php">go to Admin Index </a>
    Within the call to nhpup.popup(), you define the text (within, you will need to escape any quotation marks with &quot;). You can also specify a width for this popup (see examples 2 and 3). This may be useful for pictures. Otherwise, the width from the stylesheet will be used (see below). You can also specify a custom CSS class for the popup in the same manner.
  • You place the Java Script code somewhere on your server in a file (I suggest the name 'nhpup_1.1.js' but feel free to use something else).
  • In your HTML, import the script like this (adjust the path to the file to that on your server):
    <script type="text/javascript" src="/nhpup_1.1.js"></script>
    You'll also need to import the Jquery script (before you import nhpup_1.1.js). I did not write that, so get it from its web home.
  • Then, style the popup boxes your way. Insert this into your CSS file:
    #pup {
      position:absolute;
      z-index:200; /* aaaalways on top*/
      padding: 3px;
      margin-left: 10px;
      margin-top: 5px;
      width: 250px;
      border: 1px solid black;
      background-color: #777;
      color: white;
      font-size: 0.95em;
    }
    Note: It is crucial that you give the popup styling or may not work from the start, maybe not even show up. Play around with all properties but the first two. There is one recommendation, though: You should specify the width - the repositioning of the popup works well if the width is known and height can vary depending on how much content is in the popup.
  • Done.

 

If you want to help, you might comment below. If you want to discuss code or help out, feel free to meet me on this script's github home.

 

Update 27.03.2014: Three smaller things:

  • Added MIT license
  • Safeguard against noConflict mode in Wordpress installations, where this script was not working.
  • Turn off tooltip movement on mouse movements on touch devices, e.g. IOS or Android.

Update 17.05.2013: I published a major update (hence the version is now 1.1).

Update 05.04.2013: I have made a github repository for the script, where I can collect issues and suggestions more efficiently than only here in the comments. People who code can also suggest updates there (via pull requests).

Update 13.03.2012: Create div only when document is loaded. Solves an issue with flash files that pause but should be auto-playing.

Update 27.11.2011: Better handling of mouseout-events, especially to accomodate problems reported using IE. I tested in all four popular modern browers, but only in one version each (FF8, Chrome15, IE8, Safari4). Please let me know in the comments if you have problems.

Update 12.11.2011: Height-calculation is now simpler - it relies on what Jquery finds the height to be. This works better, and even with tables (see example 2). I also removed the need for the onmouseout - attribute and added an optional width parameter to the popup-function. Finally, I added three examples to the article. I especially hope this helps those of you who'd like to put things other than text in the popup (like images or tables).

Update 12.06.2011: Refactored the script such that it is based on the fabulous Jquery. The reason for taking action was that IE9 and reportedly Opera were giving trouble. The browser-specific part of this script is now handled by Jquery, which makes popup.js much more stable for the future.

Update 02.12.2009: Some people asked about the transparent background I use. The transparent pic is here. Download that and in your CSS, set a path to the image like this: background-image: url(your-local-path-to/bg-pup.png);

Update 08.04.2008:  Renamed a variable to not get in the way of Google scripts.

Update 10.01.2007:  Full support for IE7, fix some glitches for Opera and IE6.

Update 07.01.2007:  Fixed vertical overflow detection: new position will be dynamic and close to cursor. Added support for non-mozilla gecko browsers (like iceweasel).

Update 21.12.2006:  Fixed an issue that would prevent edge overflow detection when a certain PolyPager javascript file was missing

 

follow comments per RSS     
  on20 Dec 2007 - 19:08 fromryan cole wwwhttp://threepillarsmedia.com
am i an idiot?  I can't get these popups to come up on the left side of the  mouse like on your navigation...
[link]
  on20 Dec 2007 - 19:57 fromNic

Well, I hope not :-)

The default position for the popups is to the right and below the mouse pointer. I played around with the Javascript so that they will appear to the right and/or above the mouse - but only in the case that there is not enough space right and/or below. (That was not so easy, considering that I don\'t know the height...)

Anyway, probably you always have enough horizontal space to the right of your links?

Here is the CSS I am currently using for my popups:

#pup {
    position                : absolute;
    width                   : 375px;
    padding                 : 5px;
    margin                  : 25px auto auto 10px;
    font-size               : 11pt;
    color                   : #fff;
    background-image        : url(pics/bg-pup.png);
    font-family             : "courier new", tahoma, verdana, arial, sans-serif;
    font-weight             : bold;
    text-align              : left;
    border                  : 2px solid #333;
    z-index                 : 200; /* aaaalways on top*/
}

The transparent pic is here: http://www.nicolashoening.de/style/pics/bg-pup.png 

[link]
  on20 Dec 2007 - 23:09 fromRyan Cole wwwhttp://www.threepillarsmedia.com/usproperty/grandmansesite/test/corporate.html

Can you email me the .js file that you used on your site navigation on the right side.  The problem i have is that there is no space to the right of where i want these popups to go, so i need them to come out to the left side of the mouse.  I guess I didn't understand from your explanation.

thanks again

ryan

[link]
  on21 Dec 2007 - 11:54 fromNic

No, you're right. Something is different on your site compared to mine and the edge overflow code doesn't really work. I looked at both on Firefox.  But the link to the .js file on this page actually links to the .js I am using, so that can't be it. That's awkward.

Maybe you can have a look at the nudge() function and find out what's so different. For instance, the code uses window.innerWidth (if you're on FF) to find out how much horizontal space it has ...

[link]
  on21 Dec 2007 - 21:27 fromNic
I was able to fix this issue. Thanks to Ryan for the report.
[link]
  on05 Jan 2008 - 21:31 fromJon R

Hey, thanks alot for providing the code to this.  I have a question though!  If i have links at the bottom of my page and i have to scroll down to them, the hover popup eventually stops following my mouse and always pops up in a static position near the top of the page, and if i scroll far enough down it becomes out of sight.  There is a lot of room for it to pop up beside the mouse pointer though.

Do you know how to fix this?

Thanks, Jon

[link]
  on05 Jan 2008 - 22:55 fromNic
I"m not quite sure I understand your problem... do you have an example online somewhere? Which browser are you using?
[link]
  on06 Jan 2008 - 5:18 fromJon R

Im using the latest firefox browser.  I can actually show you what I mean using your own webpage. 

If you're on this current page: http://www.nicolashoening.de/?twocents&nr=8

If you hover over the links that you have on the right, the ones that start at 'Knols: identify and show controversial definitions' and end at 'Salsa', well from 'Knols' down to 'Mind mapping with polypager' it works great, the layover popup  always appears to the right and below the mouse, but from 'Nigeria' to 'Salsa', the popup layover stops appearing relative to the mouse and only appears in a fixed position. 

Does this happen to you as well or is something just messed up on my end?

[link]
  on06 Jan 2008 - 10:23 fromJan
Happens to me, too. Especially annoying when one has already scrolled down, because then the hover-over-popups disappear into polypager heaven. Scroll down as far as it needs to have »mind mapping« (in latest entries) right at the top of the browser frame. I'm sending you a screenshot, too.
[link]
  on06 Jan 2008 - 10:58 fromJan
I filed a bug at http://polypager.nicolashoening.de/?bugs&nr=317
[link]
  on06 Jan 2008 - 18:22 fromNic

Yes, I saw the issue and fixed it. The code to regulate overflowing has become a lot nicer now. So Jon - you might download the script again if you care.

Controlling the vertical overflow is not easy. For instance, I can't access margin and padding of the stylesheet. Be careful about those, don't use too high values.

[link]
  on07 Jan 2008 - 4:58 fromJon R

Thanks alot man, works great, sure you already knew that though.

Hats off to you and Cheers

[link]
  on08 Jan 2008 - 7:58 fromJon R

Do you have support for IE7?

I have some data in a table thats hoverable, and in IE7 the hover messes stuff up.  Stuff jumps and flickers.

Any words of wisdom?

[link]
  on08 Jan 2008 - 10:28 fromNic
You mean the hover messes the table up? That is bad. I have an IE7 at the university and will look into it when time allows.
[link]
  on08 Jan 2008 - 18:21 fromNic

Hi Jon, I have added some support for IE7 considering edge overflow. Thanks for the report!

Anyway, I can\'t reproduce "jumping and flickering" behavior by hovering over tables. What exactly is your setup? Maybe you have example code somewhere...

Otherwise, I will upload the IE7-edge-overflow-enhanced script tomorrow.

[link]
  on09 Jan 2008 - 20:14 fromJon R

Hey, have you put the updated script up yet?  I dont have IE7 myself but someone told me the bug was happening to them.

Go to brunobooks.com/index.php, select a department and course then click Go.  Click on "Add all used books to cart", then hover over the elements in the "comments" column of the table.  This should reproduce it.

Thanks,

Jon

[link]
  on10 Jan 2008 - 8:17 fromNic

No, sorry. I try to fix this in between doing other stuff and I still have some errors. I *hate* JavaScript development with IE...

Thanks for the bug description. I'll keep you updated.

[link]
  on10 Jan 2008 - 18:11 fromNic

I updated the script. This adds full support for IE7 (mostly concerned edge overflow) and fixes some glitches for Opera and IE6.

@Jon: Your flickering issue is a styling/CSS problem. This script just switches the popup on and off... However, I investigated a little and made that issue disappear in IE7 by removing the line: "min-width:120px" from the selector: "#contentinternal".

[link]
  on11 Jan 2008 - 2:51 fromJon R
thanks much Nic
[link]
  on18 Jan 2008 - 15:30
[link]
  on04 Jun 2008 - 21:12 fromDoug
hover over popup does not seem to work in safari on a mac
[link]
  on04 Jun 2008 - 23:35 fromNic wwwhttp://www.nicolashoening.de

Well, it works for me (I have Safari 3.1.1).

Try this page: Do the popups work in your Safari? If yes, you have a different problem. If not, then I have a problem.

[link]
  on05 Jun 2008 - 14:17 fromDoug
It's safari 1.0.3. Could that be the problem - too old!
[link]
  on06 Jun 2008 - 1:47 fromNic wwwhttp://www.nicolashoening.de

Gee, I don't know Safari history so well. So you're saying that the popups on this very page do not work?

Well, I'd sure love to support as many browsers as possible, but first I would need to have a Safari 1 to test this on. Requires some googling, I guess....

Do you happen to know if there are a lot people besides you who still use Safari 1?

[link]
  on12 Aug 2008 - 22:54 fromKevin
i have ran into a problem with this script and i have no clue why. im not using it as you do. my problem is this. when i insert a table with 1 or 2 rows into where the message goes the popup works fine but when its 3+ rows it just displays nothing. Thank you for the great script
[link]
  on13 Aug 2008 - 19:34 fromNic
Kevin: The code looks at how much space it has vertically by counting characters it has to display. When it gets HTML like in your case, this count may get wrong, because some of the characters won't be displayed (because they're HTML characters). Maybe that is the problem, but the behaviour you describe is a little odd. Maybe I get around and see for myself next week, but right now I am on vacation.
[link]
  on23 Sep 2008 - 7:35 fromJan
Nice work! I'm actuly looking for code that would show image or best table with image and some text (which is somewhere in database) and would be probably saved as separate *.html. Example - list of players (hockey), and when you point over name box with name,description and photo would appear. I've browsed through the code and it is slightly above my capabilities of JS :-) Do you think that this could be tweaked to do this or I'm way out? Thank you, Jan
[link]
  on23 Sep 2008 - 13:14 fromNic
Jan: Take a look at the source code of this page and see how the popups get filled with content. This is how you can do what you want. But how you get the content is your task. This script just lets a box appear. It should be possible to add HTML as content like so: <a onmouseover="popup('<table>...Player 45 stuff ... </table>')" onmouseout="kill()" title="" onfocus="this.blur()" href="././?amsterdam&nr=13">Player 45</a> Works for me in Firefox at least. It could be a problem that this writes HTML tags (e.g. table) within another HTML tag (a). If some browser doesn't like this, you could also write HTML tags by escaping: &lt;table&gt; instead of <table>
[link]
  on05 Oct 2008 - 23:39 fromJan
Not only < and > to < and > need to be escaped but " also to "
[link]
  on05 Oct 2008 - 23:40 fromLe Brasseur
crap. Not only < and > to &lt; and &gt; need to be escaped but " also to &quot;
[link]
  on08 Oct 2008 - 2:02 fromJan wwwhttp://www.sydneyicehockey.com.au
Thanx Nic! Here is link to that page. Thanks again idea and response. All the best.
[link]
  on28 Nov 2008 - 16:41 fromMatthew
I've been tinkering around with your popup code, generating popups that show a sub-report via an ajax request. It works pretty well.. however there seems to be some issue with IE7 at the moment, even your examples on this page do not work in version 7.0.5730.11. Everything works perfect in FF3. IE7's error upon mousing over your first link is: Line 135, Char 1, Error: Object expected, Code 0, and then just gives the URL for the current page. How helpful, eh?
[link]
  on28 Nov 2008 - 16:57 fromMatthew
A short follow up, upon closer examination I'm having multiple issues.. On one page I'm the pop up will correctly display in IE7, but only so long as the mouse does not move after it's displayed. As soon as the mouse moves after its displayed, it never shows up again.
[link]
  on28 Nov 2008 - 17:09 fromMatthew
sorry to keep posting. The Object Expected error was indeed my fault (a misconfigured proxy was preventing popup.js from loading). My popups are still disappearing, but the example on your page works now. I'll keep digging.
[link]
  on04 Mar 2009 - 14:44
[link]
  on04 Mar 2009 - 14:50 fromPaolo wwwhttp://www.slowfly.it
Hi Nic, Thank you very much for sharing. I have no knoledge at all about javascript but got this hover to work, great! (cannot get transparent background thou) Still not satisfied yet and maybe you can help. I would like to put a different image in every popup on the same page depending where I am hovering how do I do that? or I could a have a hover box with text and on second half of box an image which will be obviously different. Hope you can halp. Thanks Paolo
[link]
  on04 Mar 2009 - 20:52 fromNic
@Paolo: For transparency, you need a transparent image as background (and not use IE6). You should check my CSS code to see how I use it. To use different images, you could set the class of the popup element via Javascript within the onmouseover event handler (e.g. document.getElementById("popup").className="myclass";) And then use CSS to style the popup especially for this class. Or you set the background image via javascript at the same position in the code. I think that would look like this: document.getElementById("popup").style.background-image="url(myimage.jpg)";
[link]
  on10 Mar 2009 - 18:08 fromShant wwwhttp://www.shanthagopian.com
Hey Nic! Awesome work here. I was testing the control and I ran into a problem when I was trying to show the control on a dropdown in FF 2.0 , not sure if it does the same in FF 3 The issue is when I add a onmouseover to a dropdown it displays correctly, but when I move the mouse down to select one of the options in the dropdown, the popup jumps to the top left corner of the document, as if the mouse pointer clientX and clientY =0 (when you place the mouse at the top left corner of the dropdown options) and then it keeps moving from there as you move the mouse, I tried to do onmouseover="kill();" for all the options it does not work, even though kill() is firing in that case, but reappearing immediately. thanks
[link]
  on17 Mar 2009 - 0:38 fromRay
Hello. I got your script to work and it works great. The only problem is that the reason why I need it is not really as a tooltip. I have a php website, and on my main page it shows a list of names from a database, I want that when you hover over those names to show more information including the picture of the person. Those things will be generated through php but I dont think or dont know how to run php inside of the "popup('')" in the javascript. Can you help me out? thanks!
[link]
  on17 Mar 2009 - 2:45 fromNic

@Shant: Interesting. I never tried to put it in a dropdown menu. There must be some interference that I can't understand right now. If you want to send me your code in an email (see my resume for the address), I might find something.

@Ray: When this popup displays, the servers work is done. This is just HTML and Javascript. While Javascript is only working on the client, I suggest you put the images already in the HTML when you build it on the server. I got a similar question some coments above. here is my answer to that: http://www.nicolashoening.de/?twocents&nr=8#comment172

Cheers!

[link]
  on18 Mar 2009 - 6:27 fromRay

Hello. Thanks for the answer. Will the pictures load with the website or in the moment when you hover with the mouse? Thanks

[link]
  on18 Mar 2009 - 10:15 fromNic

I think the latter.

[link]
  on20 Mar 2009 - 23:09 fromNic

Hi Shant,

I can confirm your problem after you sent me the code.
It works for me as soon as I give it the styling I suggested in step 4
- especially the "position:absolute;" value is important so that the
popup window doesn't mess with the layout.

[link]
  on05 Apr 2009 - 16:00 fromSteve Davies

Hi there,

 

I came across this piece of code and it's amazing!

 

I'm trying to use it in a calendar though, so when you hover over an entry it pops up with the appointment details.

 

When i'm trying to format the content of the popup with a table <table></table> i'm getting the popup appearing in different positions, depending on where abouts on the screen the anchor is...

 

Can you suggest a better way for me to format contact details, etc, inside the popup?

 

Cheers,

Steve

[link]
  on05 Apr 2009 - 17:15 fromJan

Hey Steve,
have you tried <div> and <span>? I'd use a div replacing the table and one for each row, spans for the cells. Might do the trick.

[link]
  on15 May 2009 - 16:58 fromRobert Hinchliffe wwwhttp://-

Hi,

Just a little fix to this terrific code.

I was getting my tooltips jumping all over the place, when the font size was smaller than the script expected. i.e. the nudge code which approximates the height of the box gives back an incorrect value.

My tip is to change teh code to use "offsetHeight" for the pup element. e.g.

Comment out:

 /*
  est_lines = parseInt(document.getElementById("pup").innerHTML.length / (parseInt(skin.width)/15) );
  est_lines_to_decide = max(est_lines,2);
  if((y + parseInt(est_lines_to_decide * 20)) > (dims[1] + scroll_x_y[1])) {
    y -= parseInt(est_lines * 20) + 20;
 */

and replace with :

var heightOfBox = document.getElementById("pup").offsetHeight;
   if( (y + heightOfBox) > (dims[1] + scroll_x_y[1])) {
      y -= heightOfBox ;
   }

 

p.s. You comments page doesn't work with Firefox 3

:-0

[link]
  on18 May 2009 - 11:15 fromNic

Hi Robert,

Is offsetHeight supported by all browsers? I couldn't find information on that by googling 5 minutes... It would be a better solution, of course. Thanks for sharing.

[link]
  on18 May 2009 - 11:32 fromNic

I am also experiencing hickups in commenting. Will investigate, but actually I did the last comment with FF 3.0.10, so the problem is sthg else...

[link]
  on02 Sep 2009 - 19:33 fromGlen Williams wwwhttp://www.williamsglenc,info

I have three words in my online resume that I would love to learn how to make the hyperlink pop up ans show the picture wiht our taking them to the next page.. like a preview button.. how do I do this?

 

[link]
  on18 Sep 2009 - 11:41 fromChris

Hi, I have applied your script to an image. Its fine on Mac Safari and on PC Firefox, but PC IE6 & IE7 the image does not display and no popup! any ideas? 

[link]
  on18 Sep 2009 - 13:53 fromNic

No, sorry. Sounds just like a CSS problem on IEs. Remember that my script will only play with the position, size and display property of the box.

[link]
  on02 Dec 2009 - 1:26 fromJen

 To save time for those dummies like me that could not get this work for an hour despite going over instructions again and again and again, the browser_detect.js script MUST be called up before the popup.js script <sigh>.

Great work Nic, thanks. Jen

[link]
  on12 Dec 2009 - 8:18 fromNate wwwhttp://nateabroad
[link]
  on12 Dec 2009 - 8:19 fromNate wwwhttp://nateabroad.tumblr.com

Sorry for that broken last post. I have successfully implemented it with your custom background, and it looks great! Thank you so much for this.

[link]
  on16 Feb 2010 - 1:16 fromBomberMan

Thank you for this, it was very useful... but i'm a noob at this stuff so I had trobel using it (I did get to work, finaly)... so, Thank You so much for the script and and (somewhat) easy 5 part tort.

[link]
  on02 Mar 2010 - 0:33 frombillp wwwhttp://www.lajollalightrealestate.com/

 I tried all the steps and it just doesn't seem to want to work on my homepage. Can you help?

Thanks,

Bill P.

[link]
  on02 Mar 2010 - 13:52 fromNic

Not really, Bill, sorry. I know nothing about your website.

[link]
  on10 Mar 2010 - 11:58 fromPeter wwwhttp://www.sd-editions.com

Very nice.  Just one problem:

When I try to display this:

Transcription key: <table>  <tr><td><span class=erasure>xx</span></td><td>Erased text</td></tr> <tr><td><span class=erasure>[..]</span></td></td><td>Erased unreadable text</td></tr> <tr><td><font color=green><sup>&#x005c;&#x005c;xx/</sup></font></td><td>Interlinear insertion</td></tr><tr><td><span class=erasure>[xx]</span><font color=green>yy</font></td><td>Erased text replaced</td></tr><tr><td><span class=plus><sup>&#x2190;&#x005c;&#x005c;xx/</sup></span></td><td>Text written in right margin</td></tr></table>'
It works fine.
But if I try to add one more row to the table, like so:
Transcription key: <table> <tr><td><span class=erasure>xx</span></td><td>Erased text</td></tr> <tr><td><span class=erasure>[..]</span></td></td><td>Erased unreadable text</td></tr> <tr><td><font color=green><sup>&#x005c;&#x005c;xx/</sup></font></td><td>Interlinear insertion</td></tr><tr><td><span class=erasure>[xx]</span><font color=green>yy</font></td><td>Erased text replaced</td></tr><tr><td><span class=erasure>[xx]</span><font color=green>yy</font></td><td>Erased text replaced</td></tr><tr><td><span class=plus><sup>&#x2190;&#x005c;&#x005c;xx/</sup></span></td><td>Text written in right margin</td></tr></table> It does not work!!! help...
[link]
  on10 Mar 2010 - 22:52 fromNic

Hi Peter

Your table is wider than 250px with that row. Specify more than that for #pup in the CSS and it works.

Cheers,

-Nic

[link]
  on11 Mar 2010 - 7:35 frompeter wwwhttp://www.sd-editions.com

Yes, it does work when you widen the pup.  But a few problems..

1. Can you have different pups with different widths? sometimes you just want a real narrow one; nuisance to have to have to make it wide to meet the few cases where you need it

2. When you expand the font, the pup disappears.  This is a real pain.  I have tried using floating divs instead of tables; same problem.

It would be nice to have a solution for this!

[link]
  on12 Mar 2010 - 20:23 fromNic

@Peter

1. well, you can, if you reprogram the javascript a little (which wouldn't be too much work), but not like it is.

2. Like the problem I helped you with (you're welcome by the way), this is a CSS problem. Font resizing works for me. Anyway, the CSS I gave here is just a suggestion, what I actually provide is the javascript.

[link]
  on13 Mar 2010 - 7:36 frompeter wwwhttp://www.sd-editions.com

Yes, I see it is working in your example.  Obviously, it is a matter of getting the css right -- but there seem to be complex interactions between the js and css which makes it hard.  When I use a simple string, as in your example, no problems. But introducing tables or divs clearly does create problems.  maybe a few examples of more complex html in the popups would help.

[link]
  on13 Mar 2010 - 16:34 fromNic

The only style things touched by the script are position (top, left) and if it is shown (display, visibility).

I think the reason that (the very few) people who want to have something inside the popup beyond text (for which they want to have their own layout) is that the popup is maybe positioned out of view.

As I have explained on this page already, the hard part is the estimation how big the popup will be rendered (as the width is fixed, the height is still open). I need this to position the popup, so that the user sees everything (if it would be too low, the script raises it). The script counts characters and estimates the height.

When you put a lot HTML in there, the counting goes wrong of course. However, counting only the chars (and not the HTML) is of no use. If people want to layout the popup themselves and maybe put pictures in there, there is now way the script can guess the height.

There is no perfect solution if you want to do those fancy things (as a hover-over popup  is by default not scrollable). The best I can think of is that if the height is given via CSS, the script doesn't estimate it. The only disadvantage is then of course that you need to define both width and height.

That solution would also be reasonable in amount of work for me to put in, because this is not my day job.

[link]
  on13 May 2010 - 16:13 fromR

Thank you a lot for the provided code, Nic!

But I have a problem with it on my site: when there is a flash object located on the right side of a link, the popup box drops below the layer of the flash object and is hidden.

The z-index in css isnt changed, and on highest level.

 

This problem occurs in IE, Opera and FF, except FF 3.6 (popup ontop only with a defined background color, a png as background lets the popup drop behind the flash object again)

 

Is there any way to fix this problem?

Any changes to the js file to display the popup box on the left side would help too.

Thanks

R.

[link]
  on14 May 2010 - 15:53 fromR

I've got it fixed, by adding

 

position: relative; z-index: 0

to the css of the flash containing div, and

 

<param name="wmode" value="transparent" />

to the flash object tag.

 

R.

[link]
  on15 May 2010 - 7:49 fromNic

Congrats, R. Very helpful tips, indeed :) (I didn't know that)

[link]
  on28 Jun 2010 - 3:28 fromCyrus
[link]
  on28 Jun 2010 - 3:32 fromCyrus

I love you.

[link]
  on28 Jun 2010 - 3:34 fromCyrus

Sorry for the triple post, but I noticed that if you click out of the comment box in FF 3.6, it posts with nothing in it (as you saw in my first post)

[link]
  on04 Aug 2010 - 23:33 fromBjorn wwwhttp://www.bjornh.com

 This is nice.. definitively bookmarking it but I've been working hard on titles already. Some say it's good for SEO so with this one displaying blank titles and generating the boxes through Javascript I'm a little worried that the search engines won't pick up the titles.

If anyone can convince me otherwise I'd be glad to hear it.

[link]
  on03 Sep 2010 - 10:59 fromtembel wwwhttp://www.tembel.net

This is perfect! Thanks you very much, i find to any time this.

 

[link]
  on03 Sep 2010 - 11:01 fromprefabrik wwwhttp://www.karmod.com

Thanks you wonderful working any browsers. Perfect sharing!

 

[link]
  on02 Oct 2010 - 10:11 fromJames Cooke wwwhttp://www.cookeit.co.uk

Thanks for this script it was extremely easy to get setup and gave just the effect I was after.

[link]
  on02 Nov 2010 - 10:24 fromugg boots knit wwwhttp://www.uggeinkaufenboots.com/

Thanks for this script it was extremely easy to get setup and gave just the effect I was after.

[link]
  on14 Nov 2010 - 15:38 fromUnknown823 wwwhttp://www.catholiccorner.com

 Wow, this is an amazing code and working perfectly, thank you.   However, I was wondering if you could make (or tell me how to make) it so that the textbox does not follow the cursor and so that I can put html elements in it; I want to put a signup ad-type thing in it, and if it follows the cursor, it is kind of hard.  I am okay with CSS and HTML, but I am horrible with JS.

Thank you very much.

[link]
  on14 Nov 2010 - 22:55 fromNic

 @Unknown823 What do you mean, "not follow the cursor"? Not follow it once it is there, or always display it at one position, no matter where the hovered link is?

For the second option, comment out these two lines:

if(n_6)document.addEventListener("mousemove", get_mouse, true);
if(nav || iex) document.onmousemove = get_mouse;

As for HTML in them, I believe some people here were successful with that. maybe take a look at the comments. I myself never tried it.



[link]
  on15 Nov 2010 - 3:17 fromUnknown823 wwwhttp://www.catholiccorner.com

Okay, thank you, I got the HTML working in it, but for the not following the cursor thing, I was wanting it to appear after hovering over some text and then have a few seconds delay onmouseout before the popup goes away and also I want the viewer to be able to put the cursor in the popup.

Thanks; you're a genius.

[link]
  on15 Nov 2010 - 10:59 fromNic

>I was wanting it to appear after hovering over some text and then have a few seconds delay onmouseout before the popup goes away

Sorry, that is not that easy. Maybe you find some other script that does what you want. Good luck!

[link]
  on16 Nov 2010 - 3:04 fromUnknown823 wwwhttp://www.catholiccorner.com

 Haha, alright then, thank you.

[link]
  on08 Feb 2011 - 15:16 fromVishal

background-image: url(your-local-path-to/bg-pup.png)

I could not find the image in the below link. Please help me with this or provide the bew link.

http://www.nicolashoening.de/style/pics/bg-pup.png

[link]
  on08 Feb 2011 - 15:43 fromNic

Well, the link works for me.

The image is just one pixel, so maybe you just overlooked it? Unless you don't get an "Object Not Found" error, the link points to something.

[link]
  on23 Feb 2011 - 13:32 frompaul marsh wwwhttp://www.censura.co.uk

Hi i hope someone can advise as i can't get the pop up to work -
I have amended my link to
 

 

 

 

 

<a onmouseover='popup("click to see all administration options")' onmouseout="kill()" title="" onfocus="this.blur()" href="index.php">go to Admin Index
</a></a></li>

Now i am not a programmer normally href refers to a link to another page - it says Admin Index so do i create a page that will host all my pop up text for each of the links i have

in this eg index.php if so how does it pick up the correct text for each pop up?

or is the popup text contained in the popup() ie popup("Here is my pop up text that the person will see when they hover over text") and use the title to give it a name - ie "Having Fun -Dave & Marrie"

I am building a website from a template as i have done a few times (but not adding pop up) it is for my wifes 40th and my idea is to allow her friends to post little stories that people could read on hover over title.

I added the scripts as follows :-

<script type="text/javascript" src="js/browser_detect.js"></script>


<script type="text/javascript" src="js/popup.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>

i show the last one to show they all reference the same directory

 

I have added the two files copied/downloaded into the js directory

and added the style css #pup

the web site is not published as yet just using html editor and viewing ammended pages through that so not sure if it works only if published - help please

 

 

 

 

<li>

[link]
  on23 Feb 2011 - 13:45 fromNic

Hi Paul,

I am not sure what your problems are exactly. But two things I can say:

You have closed your link two times: </a>. Is that by design? If you have a link in a link, I am unsure what the result will be, actually. Doesn't seem right.

Also, you write one link like this for each link that should have a hover-over popup, and the text that will be shown is what you wrote in the 'popup' attribute. How it gets in there is your problem :) If your friends post stories, do you store them in a database? Then you will have to get them from the database into this attribute dynamically. If they send the stories to you, then write them in the popup-attribute by hand.

[link]
  on24 Feb 2011 - 21:05 frompaul wwwhttp://www.censur.co.uk

Ok thanks, the <a> was a mistake only need 1.


The problem i have is that when i try and hover over the link nothing happens it acts just like link.

Now as i said i have not published this yet just wrtitting it using a html editor and viewing the oage through that so at the moment the work is on my lap top and the various scripts reside on my lap top - I was trying to establish if it should still work or not -

You mention popup attributes attributes for the text is this as i have it ("click to see all administration options")' also i was not sure about the " and ' part do i just enclose my text in "" or '' thank you for your help

[link]
  on25 Feb 2011 - 2:23 fromNic

 Hi, I don't see anything wrong with what you posted here. You can send me your setup if you like and maybe I find time to check if I see what is missing (email address is on my resume).

But you might also install Firebug and try to find out yourself what's wrong. It's a very helpful tool.

[link]
  on03 Mar 2011 - 15:10 fromNic

fyi: Paul forgot to include the CSS and that caused the popup to not be shown at all. To make more sure that people don't forget either, I'll add a warning to this page that the CSS is crucial.

[link]
  on16 Apr 2011 - 1:52 fromCasey Daniels wwwhttp://www.danielsforschoolboard.info

For some reason it doesn't work well on framed pages.  Go to the bio link and the second link under professional background "Piedmont Airlines - Line Captain" the pop up hides under another frame

 

[link]
  on17 Apr 2011 - 22:53 fromrobert

Its working well in FF4, Chrome, and Safari but as usual IE has problem. In IE9 the pop up is always displayed on the top left corner. Any idea? Thanks

[link]
  on24 Apr 2011 - 3:26 fromChris wwwhttp://https://www.ImperialAdvisors.com

Nic,

Marvelous work! Could we have you comment on IE-9 (compatibility view off) and Opera v11.10,Build 2092?

In Opera, the pop-ups go to the top of the frame for a bit, then top of the page, especially if you must scroll to get to the pup in the first place.  Working on all other modern browsers we've tested.

Best,

Chris

[link]
  on25 Apr 2011 - 13:57 fromNic

 Hi Chris and Robert, I will have to look into IE9 and jope to do that very soon.

@Casey: Thanks for letting me know. I don't know anything about frame-problems from the top of myhead, though... I'll have a look.

[link]
  on15 May 2011 - 5:11 wwwhttp://www.happycow.com.au

 Been trying for days and days and just cant get it to work!?

Even on a blank page with no other js it doesnt seem to work... http://www.happycow.com.au/tester.html

 

what am i doing wrong?

[link]
  on15 May 2011 - 11:17 fromNic

 @happycow: I looked at the website you linked to, and it doesn't include the popup.js script.

[link]
  on04 Jun 2011 - 1:48 fromNic

 To all people worried about IE9 - compatibility: The problem has been on my mind between my dayly routine, but I haven't been able to get hold of some Windows newer than XP yet - to be able to see the problem (IE9 will not run on Windows XP, thanks Microsoft). However, I am still on it and will get back to you here!

[link]
  on13 Jun 2011 - 17:14 fromNic

To all people worried about IE9 - compatibility:   I finally came around to refactor the script such that it is based on the fabulous Jquery. The browser-specific part of this script is now handled by Jquery, which makes popup.js much more stable for the future. I tested on all current versions (including Opera) plus IE8, please report any issues.

[link]
  on13 Jun 2011 - 21:39 fromJon wwwhttp://www.pari.co.il

Hi !

I feel like a complete idiot because i can't get this done..

my site is in hebrew, maybe this is what preventing it to run?

I have changed my index to php, and saved it under http://www.pari.co.il/test.php , using a css file in same location called test.css and the popups just don't show..

I also had to change the #pup line to pup becasue with the # it created an unwanted frame right on my index's logo.

Would u mind trying to glance at my page source and see what i am missing?? 

 

MANY THANKS!

Jon

[link]
  on13 Jun 2011 - 22:53 fromNic

 Hi Jon,

There are two things: First, import the jquery before you import popup.js Maybe this already solves all problems. Second, you need to put the '#' back in, otherwise the CSS is not matched to the popup element and will not be applied.

hth,

-Nic

[link]
  on13 Jun 2011 - 23:08 fromJon wwwhttp://www.pari.co.il

Hi Nic,

first, thanks for taking he time.

I changed the ordered of the js files, and even added the # back to pup (will deal with the frame later) - but still nada...

any thoughts?

thanks

[link]
  on13 Jun 2011 - 23:09 fromJon wwwhttp://www.pari.co.il

(the implementation attempt is near the entry marked 24.1.11)

[link]
  on13 Jun 2011 - 23:57 fromNic

Jon, another error I see while importing jquery is that you wrote 

src=""http://www.pari.co.il/jquery-1.6.1.min.js"

That is one " too much at the beginning.

[link]
  on14 Jun 2011 - 0:13 fromJon wwwhttp://www.pari.co.il

 That did it... now i feel like an absolute knob :(

Many thanks for the help!! i will try and see why the frame won;t disappear and if trouble will revert.

again again thanks for helping and supporting the stupid :)

[link]
  on14 Jun 2011 - 0:25 fromNic

Best of luck, let me know if something with the popup is not working after all ...

[link]
  on14 Jun 2011 - 0:40 fromJon wwwhttp://www.pari.co.il

 will do.

at the time being , looks good!

[link]
  on18 Jun 2011 - 12:16 fromJon wwwhttp://www.pari.co.il

 Nic Hi again,

[1] i have implemented your brilliant popups wuite successfully.

[2] new issue - Is there a way to define in the CSS another #pup attributes so I will have to different styles of popups in the same page? and if the answer is positive, how do I call upon the second style?

IE - i have popup of pink rounded boxes and I wish to have another of a red box. is this possible?

 

Thanks in Adavnce,

Jon

[link]
  on19 Jun 2011 - 1:02 fromNic

Hi Jon, not with the script as-is. But it is not hard to do :) You could tinker with it a little, say passing another parameter to the popup function for the border color. The popup function could then set that border-color with a simple jquery call. Since this is a very specific feature, I will not implement it. You can do it yourself, with very little javascript/jqeury research. Success!

[link]
  on19 Jun 2011 - 13:11 fromJon wwwhttp://www.pari.co.il

 Yep, gotchya! 

thanks very much mate and keep up the good work!!

[link]
  on19 Jun 2011 - 13:59 fromNic

Hi Jon, maybe too lare, but there is smthg else you can do, maybe you find that easier: after calling popup(...), change the border-color directly:

onmouseover="popup('your text'); $('#pup').css('border-color', 'red')"

[link]
  on30 Jul 2011 - 20:11 fromuman

Hi.

i tried this on a blank page and it worked. the popup was right beside the text. it's great.

but when i apply it on this website that i'm making (to any page), the popup goes around 3 inches below the text.

any idea on this? conflict with my existing css or layout? can i tweak something in the code that could change its height position? 

thanks in advance! 

[link]
  on01 Aug 2011 - 15:15 fromNic

Hi uman,

FTTOMH I can't find anything where old CSS would interfere. Hm, maybe because the popup is a div - do you have any general styling on divs?

[link]
  on31 Aug 2011 - 23:38 fromFabien FEtter wwwhttp://www.paradive.ch/test.php

Hi,

I've put your code in that page : http://www.paradive.ch/test.php

But on FF, I've not tooltip coming up, and a weird grey box in the banner.

Any idea what's not working ?

Cheers

Fabien

[link]
  on06 Sep 2011 - 14:30 fromadrian

Hi Nic,

First, thanks for taking the time.

Got the script working here http://testspot.ro/flubber/product.php?id_product=7 but the pop-up appears briefly on the screen while the page is loading (top left corner), then goes away and comes up only when it's supposed to (ie - you hover over the question marks on the right side of the page).

I have already tried several solutions, but nothing worked so far. Tested on Chrome and Firefox, haven't trien IE yet. Wouldn't have been such a big problem if the background image wasn't so big, but now it's a really big issue.

Thanks for your help :)

 

[link]
  on10 Sep 2011 - 19:42 fromNic

Hi Adrian,

indeed, I think the popup should be set to display:none right from the start, even before te document is ready. I did this now in the first line of the script (the one I link to above, on this server). I hope that helps.

[link]
  on13 Sep 2011 - 11:40 fromadrian

Hi,

Worked like a charm ;) Thank you very much!

[link]
  on12 Oct 2011 - 4:15 fromlouboutin outlet wwwhttp://www.christianlouboutinoutletus.org

Thank you for your post.

[link]
  on20 Oct 2011 - 6:43 fromJosh

awesome scripting!  Could you take a look at this and see what I'm doing wrong?

www.littlewonders.ca/schedule.php

Everything is working, but I find that when the page loaded and you hoover over the "0-4" it shows the text towards the top of the page.  But if you scroll down the page and then hoover over the same links again, it shows up in the right spot.

Thoughts?

[link]
  on20 Oct 2011 - 12:07 fromNic

Hi Josh,

When repositioning the popup, the code is a bit rough on estimating how high the popup actually is (height is dynamic, depends on the content). You can see in the nudge-function that I commented on that in the code. Especially with much text, as you have, the height estimate seems to be too big.

You could play around with the two numbers I mention there (est. char width, 15 pixels, and line height, 20 pixels). Maybe smaller values would work better for you.

This piece of the code should work better, maybe I come around one day to think again if there is a better solution. But evidently I did this once and didn't come up with anything better. Maybe JavaScript has gotten mode powerful in modern browsers in the meantime...

[link]
  on23 Oct 2011 - 3:41 fromBurtonDoloris
[link]
  on28 Oct 2011 - 8:21 fromJD

Excellent script, great job.

I found that when browsing the website running this script with an iphone, the links in the menu seem to break.

Is there a fix for this?

 

thanks

[link]
  on29 Oct 2011 - 23:49 fromNic

 Hey JD,

I don't have an iphone, so I can't directly confirm. Which website do you mean? This website or the website you are developing?

[link]
  on30 Oct 2011 - 6:49 fromJD

Hi Nic,

I find that this problem exists on this website aswell.  When you touch the screen to select a link in the menu it does not load the page.  This issue seems to exist in different versions of Safari on the iphone. 

Although this issue does not appear on an android device.

I hope you can borrow an iphone to look into this issue. thanks

 

 

[link]
  on01 Nov 2011 - 13:50 fromlrajh

 Hi Nic, great script, works fine just fine!
Does the option exsist for making it work on images (like thumbnails) and slideshows in particular. CSS and HTML details: Running on Cargo, upgraded account)

Thanks!

[link]
  on02 Nov 2011 - 19:14 fromEl

Nic,

I am having trouble getting the position of the popups to work with a long list of thumbnails.  Also the hover area for certain thumbs do not cover the entire image. Any suggestions

 

 

http://webdev.wisconsinhistory.org/topics/proxmire/interviews.asp

[link]
  on02 Nov 2011 - 20:33 fromNic

 @  lrajh,

As I mentioned here before, the width is specified in CSS, the height is determined by the number of characters. If you have no variable text in the popups, but place images in it which all have the same size, it might work well if you also specify the height in CSS (and maybe disable the height adjustment in the script).

@ El,

I can't access your website (login required). But I guess your problem is similar to the one I refer to above. 

The popups were meant to conatin text of unknown length (so the popup-width fixed, the height needs to be estimated). Maybe I find time during the next week to think about the other use case some of the users seem to have. I think we can make the script working for people who can specify both width *and* height (if you have images, this should work well). In that case, positioning becomes much better.

[link]
  on12 Nov 2011 - 2:30 fromNic

I updated the script (see the article, which also has been updated). I hope it now also works well for those of you who wish to have different content than just plain text.

I couldn't look into the iphone issue so far. Difficult to say how it should behave at all on very small screens, actually.

[link]
  on12 Nov 2011 - 19:29 fromAli wwwhttp://www.KabulFriends.com

Thanks dear I also implemented this code in my website at  at KabulFriends.com Keep it up

[link]
  on15 Nov 2011 - 17:18 fromJC

Your pop-up box will not leave me alone.  It continuously follows me all over the page and never turns off.  Is there something that I am doing wrong?  If I move to a different browser window, it waits for me until I come back and continues to follow.

[link]
  on15 Nov 2011 - 18:00 fromNic

Hi JC,

I changed the way the popup gets closed, it's now internally handled by the script and doesn't need to be written in the link anymore. If an old version of my script is used with the current instructions, then what you're experiencing happens.

If you are a developer: please make sure you download the latest version of the js.

If you are experiencing this as a visitor to my site: could you empty the browser cache and see if the problem persists?

If that doesn't help, please tell me which browser (and which version you are using.

[link]
  on20 Nov 2011 - 9:37 fromPaul

Hi Nic, I'm getting the popup following problem (i.e. doesn't close) when viewing your site using IE 8.0.6001.18702 on Win XP.
 

The mouseout function doesn't seem to be being called. But I couldn't figure out why :-)

[link]
  on23 Nov 2011 - 11:09 fromMike

Hello Nic,

Tested on IE v6 and had the same result as Paul had. The popup never went away.

Others are doing perfect (Chrome, FF).

Brilliant stuff though, i must say.

 

 

 

[link]
  on23 Nov 2011 - 12:51 fromNic

Paul & Mike,

thanks for the feedback. I guess I need to find a Windows PC and try it out (shudder). I should support IE8, but I will not give any effort for IE6 in specific. It's officially been declared old: http://www.maximumpc.com/article/maximum_it/microsoft_internet_explorer_6_outdated

[link]
  on24 Nov 2011 - 6:52 fromTerry

Hey Nic,

Thanks so much for the code. I truly appreciate the time and especially the support you've provided everyone.

With that said, can I ask for a little bit of guidance? I'm trying to modify the width of the individual cloumns of the table but no matter what I do, everything seems to stay the same.

Thanks again!

[link]
  on24 Nov 2011 - 6:57 fromTerry

Hey Nic,

Terry again. I thought it would be better if I explained myself more clearly.

I replaced the age of Han with a sentence and the first column shank to fit the data contained within it (which pretty much puts the two columns together). What I'm trying to do is put some space between the first and second column.

Thanks again!

[link]
  on24 Nov 2011 - 9:31 frombobby wwwhttp://bobbyfasel.com

 Any chance of getting this to work within an imagemap? 

I have certain areas of an image hotspotted, and I'd like to have a popup box of text appear when I hover over it. I've tried adding the onmouseover into the   < area >   tags, but it doesn't take. Neither does wrapping < a > around it. 

 

 

 

Thanks!

[link]
  on25 Nov 2011 - 0:26 fromNic

Hi Terry, through normal table-styling CSS I achieved these things, if I understood you right. I gave the th-elements IDs and then styled them. This is an example of what you could do:

table td{
     padding-left:5px;
}
#td-name {
    width: 50%;
}
#td-name {
    width: 50%;
}
 

I think the appearance of the table has nothing to do with the popup (given the popup is wide enough).

[link]
  on25 Nov 2011 - 0:52 fromNic

Hi Bobby,

it works fine for me in Firefox 8. I used this example: http://de.selfhtml.org/html/grafiken/anzeige/img_usemap.htm

Placing an onmouseover event in the area-tag was enough (of course I also inlcuded jquery.js, popup.js and my stylesheet).

Good to know that it works with an imagemap, I never checked :) But back to your problem: Did I miss your point? Different browser? Can you point me to an example that does not work for you? However, I am no imagemap expert...

[link]
  on25 Nov 2011 - 10:23 fromNic

Paul & Mike,

Thanks again for the feedback. I confirmed the problem with IE and found out that I used the 'this' keyword a bit wrong (http://www.quirksmode.org/js/this.html).

I have now hotfixed the closing of the popup on mouseout (line 71 in the script). I'll come back to the code to come up with an elegant fix, though.

[link]
  on25 Nov 2011 - 22:25 fromMichael Maardt wwwhttp://michaelmaardt.com

excellent, vielen Dank

[link]
  on26 Nov 2011 - 23:04 fromTerry

Hey Nic,

Thanks so much! That worked perfectly. Before, I tried using margins and couldn't get it to work. Not sure why I didn't think of using "width".

Cheers,

Terry

[link]
  on27 Nov 2011 - 15:54 fromNic

I updated the code, it handles the mouseout event in an elegant way now (see also my update npte in the article above).

[link]
  on29 Nov 2011 - 9:14 frommike

I updated too

And BRILLIANT!! it works on all browsers i tested, IE 6 inclusive. WELL DONE!

[link]
  on29 Nov 2011 - 10:56 fromNic

Good to hear, Mike. Thanks also goes to the Jquery people. To make a complex javascript library work on IE6 is quite an accomplishment.

[link]
  on30 Nov 2011 - 22:01 fromDave Gibson

Hi Nic

 

Please could you show me the code to open an external html file; i would like to use this on my website and would like to hover over an image and the popup window loads and external MS Word HTML file.

Many Thanks

Dave.

[link]
  on01 Dec 2011 - 16:16 fromNic

Dave, you could use jquery to help you (see http://api.jquery.com/load/).

I haven't tried it, but it seems to me that you can do sthg like

<div style="display:hidden;" id="dummy"/>

<a onmouseover="$('#dummy').load('URL-of-your-HTML-file');popup($('#dummy').html());">my link</a>

But then the document would be loaded each time the mouse is moved over the link - very inefficient. You need a javascript function that, instead of "$('#dummy').load('URL-of-your-HTML-file');" only loads that URL if #dummy not already has this content.

Might take a couple minutes to write sthg like that, but not impossible.

No, I will not do it for you :)

[link]
  on02 Dec 2011 - 2:28 fromryan wwwhttp://(it has a password)

 Thanks for the code.

The pop up in centered but to low on the page (about 200 px); however if the mouse is too far down (the window moves up), it works fine. The vertical positioning error only occurs under the default bottom, right (or bottom, left) position.

<TABLE style="WIDTH:700px" summary="">

<TBODY>

<TR>

<TD width=700 height=550 background="image.jpg">

 

<div style="position:relative; height:100%; width:100%">

 

<!-- Steamroller -->

<a onmouseover="popup('text')">

<img style="position: absolute; top: 119px; left: 369px; width: 50px; height: 70px" border="0" src="image.jpg" />

</a>

-script-

-style-

</div>

</TD></TR></TBODY></TABLE>

 

Note: I'm working in Sharepoint and forced to use a table...

 

[link]
  on09 Dec 2011 - 5:48 fromJerry

 Just excellent. Thank you!

[link]
  on10 Dec 2011 - 21:58 fromAL

You are my savior, thanks for putting this out.

I'm building my site locally atm, for now testing just with Firefox and Safari on Mac.  It looks fantastic and seems to be working right mostly.

However when I have a narrower browser window, the images towards the right side flicker a lot and don't display steadily.  Safari handles better with less flickering, while still annoying, but Firefox just goes berserk like a strobe.

I supposed this means the Java Script "When the mouse is too far on the right, put window to the left" and "When the mouse is too far down, move window up" are not being rendered smoothly? 

Is there a way to fix this?  Thanks so much for the time you put into this.

[link]
  on12 Dec 2011 - 0:42 fromNic

I see, when the browser is really only about as narrow as the popup, then it flickers for me as well. I think the line

x = max(x, 0)

is the culprit, you can try commenting it out:

//x = max(x, 0)

I'll have to think if that line served a real purpose, maybe it can actually go away for good ...

[link]
  on15 Dec 2011 - 11:52 fromJivan

i am very much a novice programmer but was able to install this in no tiem - THANK YOU!!!

[link]
  on17 Dec 2011 - 2:57 fromGman

 hi, really nice work but i have a small problem which is caused by the other java script, basicly if i use yours i can't use the other one.. it conflicts as the java archives different so i think overwrites each other... i have looked over the internet but did'nt really get the solution.. is there any easy way to fix this issue by making change on your script?... the other script im using is which gives the issue to your script

 http://www.javascriptkit.com/script/script2/backbox/

many thanks keep up the great work

 

[link]
  on17 Dec 2011 - 12:12 fromNic

Hi Gman, can you describe the 'conflict'? I don't know what I should be looking into.

[link]
  on21 Dec 2011 - 20:20 fromJeff

Hi,

I've tried this code today and it works great! However, when I hover the link by using IE8, the entire page shift a litte bit. It doesn't happen on FF or Chrome. Any idea? Thank you.

[link]
  on31 Dec 2011 - 5:11 fromMr F

Nic -

Awesome script, and awesome support!

 

I am having a problem though - my popups are appearing about 400 pixel to the right of my mouse. This is just when copy and pasting your 'a onmouseover' html word for word.

Obviously there is a conflict somewhere but I'm just not sure where to look.

 

Any thoughts are greatly appreciated!

[link]
  on31 Dec 2011 - 12:56 fromNic

Mr F,

I would start looking into conflicts in the CSS.

[link]
  on04 Jan 2012 - 21:53 fromJohn Muldoon wwwhttp://johnmuldoon.ie

Thanks Nicolas.

That is a very useful tutorial - got it to work first time.

John

[link]
  on07 Jan 2012 - 4:21 fromRob Little wwwhttp://www.roblittle.com

 I haven't programmed in years and am really out of the loop.  I think i have it all down except for the CSS file.  I'm not sure how to create that.  I know that is probably simple to you but please forgive me for asking.  Any help/

[link]
  on07 Jan 2012 - 4:44 fromRob Little wwwhttp://www.roblittle.com

 Well I noticed that as of right now I can roll over the image and the larger one appears at the top of my screen but it's all over the place, jumping around...

[link]
  on25 Jan 2012 - 8:26 fromYossi B

 Hi Nic,

I loved the popup and got it to run fine, but then I discovered a problem that I haven't been able to overcome and renders it useless for me..

When there are newlines in the text, the popup doesn't show!

My texts for the popups are read from a Mysql database. If I manually change the texts there to plain Html with <br> all is fine, but that's just not the way most texts are entered into a database.

People write them using the keyboard and hitting "Enter" and that's how they are imported into the database.

Have you got a solution for this? (I work in PHP) 

[link]
  on25 Jan 2012 - 11:11 fromNic

@Rob: Sorry for answering so late -  I don't really know how to help you setting it up from the information you gave me. If you have an example page online that I could look at, I'd take a look to see what the problem is.

@Yossi: I assume you mean \n or \r characters. From the top of my head, I don't know why that would lead to the popup not showing. Do you get any errors (maybe if you install Firebug, then it's easier to see javascript errors)?

Anyway, maybe you can replace the newline character and thereby solve this issue.

In PHP, I think you'd do:

$popuptext = str_replace("\n", "<br/>", $popuptext );
$popuptext = str_replace("\r", "<br/>", $popuptext );

Maybe it's also possible in javascript:

popuptext  = someText.replace(/(\r\n|\n|\r)/gm,"");

[link]
  on31 Jan 2012 - 2:08 fromDiana Caballero

Hi, great post!

What if I need my popup div to stay open so I can click on some links contained in it? I would still like it to disappear on roll out.

[link]
  on31 Jan 2012 - 9:33 fromNic

@Diana

that's not possible with this code. In any case, I think it is hard to define what the roll-out is exactly then. You may find a popup/tooltip out there that lets you do this (open it and then click lnks in it), but then the user probably has to click to close the window.

[link]
  on31 Jan 2012 - 22:51 fromYossi

Nic,

I solved the above issue in a similar way you mentioned. It just needed taking care of all combinations: \n , \r, \n\r and \r\n. Now it works fine.

Another issue on iPad/iPhone. (there of course there is no hover but the popup works fine on clicking). However,  I have some popups lower down on a long page. When I press the first one, the popup appears where the cursor is and the page stays in place. However, any further popup link that is pressed makes the page move up to the top, so that the popup (that was place in the proper place) is out of sight and you have to scroll down to get back to it. And so on for the others.

Have you got any idea how to stop the page from scrolling to the top when a popup link is pressed further down?

[link]
  on01 Feb 2012 - 11:31 fromNic

@Yossi,

sorry, I don't know much about javascript behaviour in Apples mobile browsers.

No idea why the page would move to the top, when the popup is in the right place...

[link]
  on11 Feb 2012 - 0:23 fromStefan

 Hi Nic

Thanks for all the help, its amazing that you still help us with this!

I want to use a diffrent hover image in each pop up. I've got 4 thumbnail divs horizontally alligned in a wrapper thats 1000px wide.

My pop up width is a 1000px, if i ad the pop to the first and second thumbnail it works, as soon as i ad a pop up to the third thumbnail div, it pushes the last two thumbnail divs downwards.

Is it something to do with using different images for each pop up, or is it a size thing.

Thanks so much!

Can you please explain

[link]
  on11 Feb 2012 - 0:28 fromStefan

 Hi Nic

I've looked through some of the posts to find if someone had the same problem as me.

Can you explain the following reply a bit better.

I want to have a diffrent image in each pop up: your answer was

To use different images, you could set the class of the popup element via Javascript within the onmouseover event handler (e.g. document.getElementById("popup").className="myclass";) And then use CSS to style the popup especially for this class. Or you set the background image via javascript at the same position in the code. I think that would look like this: document.getElementById("popup").style.background-image="url(myimage.jpg)";

Can you please help me on how to do this, is it in the javascript file or html where i insert the event handler.

Thanks!!

[link]
  on11 Feb 2012 - 1:35 fromStefan

 Hi Nic

I got it to work, i actually can't beleive it, i just didn't close tha <a tag..ha ha, 

 

Thanks for the great and easy script!

 

Where can we find more of your stuff, you explain it very well and reply on everyones comments.

Nice one dude!

[link]
  on11 Feb 2012 - 3:31 fromNic

Hi Stefan, great that you got it working - reading existing comments is always the sign of a smart man :) I'm happy that someone could use them!

I have no other front-end web-dev tutorials, just this one. I mostly do other, more back-endy things when I find time to program these days, I am nhoening on assembla and github.

[link]
  on22 Feb 2012 - 10:17 fromShahid
[link]
  on26 Feb 2012 - 6:56 fromrockie

Hi Nic , u did a great post here.

I had implemented this popup in my php page, http://www.turzon.com , it works well. Thank u so much.

NowI want to work with my aspx pages , but somehow it didnt show anything.

Is there any thing should be added to work things out in aspx ?

Thanks dude

[link]
  on04 Mar 2012 - 13:16 fromneil

Hi Nic,

I used the mouseover event to diplay  the popup, but how would I request data from mysql to be displayed in the popup.   Actually how would I pass the reportnumber to an AJAX script.

Thanks in advance,

Neil

echo "<tr><td><a mouseover=\"popup($('#hidden-table').html(),400)\;" onmouseover=\"showUser(this.id)\"    >    ";
echo $row['reportnumber'];
echo "</a></td><td>";

[link]
  on04 Mar 2012 - 14:38 fromNic

Hi Neil,

I think your link defines two mouseover events, not sure if the second overwrites the first. And the first is only called mouseover, I think that doesn't actually exist.

Anyway, maybe you just want to do this (untested by me, obviously):

echo "<a onmouseover=\"popup(".$row['reportnumber'].",400)\";>link-text</a>";

Or you could display the data in a hidden table, just like you would if you just show data in a normal table, but this table is only shown in a popup.

[link]
  on10 Mar 2012 - 5:00 fromJohn wwwhttp://N/A

Hey Nic.

Awesome code. I notice a issue that I dont think anyone has mention yet. I'm using a local server atm so its not online but I notice a huge issue on pages that have .swf files "which are flash files" When the page loads the flash file pauses and it shows the page is still loading at the bottom of the broswer window. It will remain like this until you move the mouse down to the bottom of the window and then the flash starts moving again. Its really wierd. it really stinks cause its a huge deal. It keeps me from being able to use this code :(. I'm using IE8

[link]
  on10 Mar 2012 - 5:05 fromJohn wwwhttp://N/A

To add to my above post. I just notice the flash unpauses if I hover over the picture im using the code on. So the the flash file unpauses either moving mouse to the bottom of the window of the browser or the link i made for the code to use.

[link]
  on11 Mar 2012 - 6:05 fromJohn wwwhttp://N/A

Hey Nic. decided to mess around with your code a little at least try to figure out where in your code its messing up. Right now I discovered if I disable your code that has to do with "Avoid edge overflow" the issue goes away. and of course alot of new issues show up :)  so maybe this information will help you faster in helping me figure out how to fix this. cause i really want this working with flash funning on the page. Also to add the flash videos will also unpause if i put my mouse over the flash videos too.

[link]
  on11 Mar 2012 - 12:53 fromNic

Hi John,



thanks for the report. I don't have an idea yet what the problem is.



I have trouble investigating without your exact conditions. Could you send me a zip with your setup (HTML, CSS, js and flash files)? My email address is on my CV (see about page). I do have a page with flash files (youtube links) but they are not set up to play right after openin?



Maybe the popup overlays your flash file which then decides not to play.



Weird that the page says it is still loading as my script should do nothing until the page is ready :



jQuery(document).ready



Ah - what happens if you move the line beginning with "document.write ..." after the line I cited above?

[link]
  on11 Mar 2012 - 19:59 fromJohn wwwhttp://N/A

Hey Nic

Im really good with php but my knowledge of java script is really hairy. I placed document.write after the entire jquery(document).ready function. which is like 20 lines down past it with no affect. one thing i did notice i have to close the broswer out and reopen up to see true changes made for every test.

Anyways I sent you a email. Hopefully you will figure something out lol.

[link]
  on13 Mar 2012 - 5:50 fromneil

hi nick,

went with the hidden table  on mouseover.   thanks for your quick response.

cheers,

neil

[link]
  on13 Mar 2012 - 10:10 fromNic

FYI: I could solve Johns problem with the latest update to the script (see update notes below the article).

@Neil: Goot to know, thanks for the feedback.

 

[link]
  on15 Mar 2012 - 19:13 fromJo

I came across this and I'd like to use it. One question though does this work when hovering over a picture with mapped links? Or does it just work with the <a> tags?

[link]
  on16 Mar 2012 - 9:03 fromNic

Hello Jo,

Someone called Bobby asked about imagemaps in the comments (search for it). I found that it worked well for me.

[link]
  on18 Mar 2012 - 9:07 fromtopmse wwwhttp://www.topmse.com/

 hey very nice post. but i want something different from this can you help me.

i need you help.

actually i want to show this hover opver popus on my ads. i mean i want to use it in my ad network ads.

which will contain a link to my ad network '"ads by topmse"

it is similar to google

i only need this for images type ads,

plz help me throwgh my email id.

thanks in advance.

[link]
  on20 Mar 2012 - 20:54 fromJoe

Hi,

I was wondering if there's a way to store the table in a separate html file and call it in the div statement.  What I'm trying to accomplish is being able to refresh the tables on a daily basis without having to edit the main page every time.  Imagine having Team 1 through Team 16 and using onmouseover for each team to display the team members and their scores, both of which are subject to regular change.  I want to utilize SAS to kick out text files that are then read in by the web page.

Thanks,

[link]
  on21 Mar 2012 - 8:05 fromMark

Hi,

Thanks for the code. It worked fine in my site. Just had one concern, i've used it on a map and all the links where directed on the page which includes also the same map with pop-up. but when i clicked on the button (with the pop-up) the pop-up goes at the left-bottom, you need to re-point again your cursor on the button so that it would work again correctly. the error shows in firefox, but it worked fine in the chrome.

Thanks.

[link]
  on21 Mar 2012 - 9:28 fromNic

@Joe: Your question doesn't really concern what my script is doing, but here is an idea: You can load a separate HTML file using jquery. Something like this should work (where your page has a hidden div to load the HTML into and url is the url of that external file):

onmouseover="$('#a-hidden-dummy-div').load(url); popup($('#a-hidden-dummy-div').html())"

@Mark: I can't follow. Maybe you can send me a zip with a minimal setup where the problem occurs or post a link to one?

[link]
  on01 Apr 2012 - 19:09 fromwill

your hoverPopup is exactly what I was looking for.  But like most tutorials on the web, you already have to know very deep things to get them to work.

Wish you folks could write complete understandings, I saved your page for when I get time to figure it out.

I just have a strong working knowledge of HTML,CSS and learning javaScript now. Tutorial help is difficult to find and difficult when ya do find it.

One thing you did very well, you did not flash a white bg in my eyes, so I thank you for that. Usually I need sunglasses so I can keep my 20|20 vision.

I do thank you for what I hope to gain from your information someday.

[link]
  on02 Apr 2012 - 16:39 fromMorhpos

Thank you man nice scripts, but I'm also worried about the SEO compatibility. What do you say about the popup options on this website: http://www.scientificpsychic.com/etc/css-mouseover.html? I think they are really great too!

[link]
  on02 Apr 2012 - 19:31 fromNic

They are also cool. Mine have the advantage to be much easier to use (just place a call to popup() in a mouseover event) and they dynamically relocate to fit into the given browser window.

I'm not an SEO expert, but FTTOMH I think it can be equivalent. Per design, the content for any such tooltips/popups are not shown - I think Google looks at what is shown foremost. If it is beneficial to place content in HTML rather than in a javascript call, you can do it like the example I give in the article with the table.

[link]
  on04 Apr 2012 - 6:42 fromNigel Hall wwwhttp://appweavers.com

Thanks for the great popup code Nic. I'm using it in a little web app I'm putting together. I do have a problem though.

The app takes input from the user via a form and responds with more selections provided by a php script accessing a database. Everything works great in Safari, IE, Firefox, Chrome. However, on Mobile Safari (iOS), the popup code prevents the form from showing the options for the user to select. Tapping the form button highlights the box but doesn't display the options. Is there something in your code that would disable a Tap event in iOS?

To see what I'm talking about, take a look at http://petersonguides.com/tlist.html

I'm using the popup in the final table presented after the user makes all of the selections. Mouseover one of the bird names to see it in action.

I might try delaying calling the popup.js code until the last minute, but would be nice to identify what's causing this in the jquery code.

[link]
  on04 Apr 2012 - 7:31 fromNigel Hall wwwhttp://appweavers.com

Through brute force elimination I've managed to narrow it down to the nudge function in popup.js that's causing the iOS problem.

[link]
  on05 Apr 2012 - 9:54 fromNic

Hi Nigel,

Sadly, I don't have a device that runs iOS so I can't check. I javen't been developing anything for mobile devices yet.

Anyway, the nudge function avoids edge overflow and is (constantly) called by the mousemove event handler (which repositions the popup to be at the mouse pointer). It appears that nudge interferes with your onchange code, but I don't know how. It doesn't seem to do expensive computations and it does not loop. What happens if you don't use edge overflow avoidance? To check, it should suffice to comment out this line in the mousemove handler:

var x_y = nudge(x,y);

and in the following lines replace "x_y[1]" with "y" and "x_y[0]" with "x".

You could also do someting more drastic: position the popup only once, right when popup is being called (in the moment it is being shown). For this, you would put the code in the mousemove handler into a javascript function and call that from within popup().

[link]
  on06 Apr 2012 - 8:14 fromNigel Hall wwwhttp://appweavers.com

 Thanks for the suggestion Nic. I managed to route around the nudge function if an iOS device is being used with the following:

if (agent.indexOf('iPad') == -1 && agent.indexOf('iPhone') == -1 && agent.indexOf('iPod') == -1){

       var x_y = nudge(x,y); 

      }

That lets iOS users get to the table, which was the biggest problem, and it still gives the popup functionality to desktop users. I will look at using Javascript to do the popup on iOS devices.

Thanks again for putting this together. It's exactly what I needed.

[link]
  on06 Apr 2012 - 10:28 fromNic

Hi Nigel, good to hear. However, the way you did it will produce javascript errors on apple devices, because the following lines (see my above post) will not find the variable x_y. Not critical, but in effect you just turned off popup behaviour completely for these devices, which is not necessary. My suggetion above would probably yield limited, but useful popups.

[link]
  on08 Apr 2012 - 23:22 fromjerry oz wwwhttp://www.supertech.co.il/index.php/digital-catalog

Great scripts. Thanks man.

[link]
  on16 Apr 2012 - 23:21 fromJD

I still continue to have problems with this script in iOS as mentioned above by nigel.  Can someone please provide a proper fix to disable this script in iOS.

 

also where do u put this code:

if (agent.indexOf('iPad') == -1 && agent.indexOf('iPhone') == -1 && agent.indexOf('iPod') == -1){

       var x_y = nudge(x,y); 

      }

 

thank u

[link]
  on18 Apr 2012 - 3:41 fromRachael

 I can't get the text box to appear..Hear is the code i used, is there a mistake?

 

 

<a onmouseover="popup('click to see all administration options')"href="index.php">go to Admin Index </a><script type="text/jqueryscript" src="/public_html/popup.js"</script> <script type="text/javascript" src="/public_html/popup.js"></script>

pup {  position:absolute;

  z-index:200; /* aaaalways on top*/

  padding: 3px;

  margin-left: 10px;

  margin-top: 5px;

  width: 250px;

  border: 1px solid black;

  background-color: #777;

  color: white;

  font-size: 0.95em;}

 

[link]
  on18 Apr 2012 - 10:10 fromNic

JD, try this file: http://www.nicolashoening.de/user/File/popup-ioshack.js

It is just a hack, turning off the constant repositioning of the popup. Couldn't test myself, as I have no iphone.

The more I think about it, the more I am convinced that the behaviour of this popup/tooltip is not well-defined on mobile devices. It appears on mouseover, but does the mouseover-event actually exist on mobile devices?

I should probably turn off all the code whenever it runs on any mobile (not just IOS). If I get to it, I'll update the code to cleanly turn off everything on mobile devices (until I have a better idea for supporting it there).

[link]
  on18 Apr 2012 - 13:47 fromNic

Rachael,

I think that the type "text/jqueryscript" does not exist. Should be "text/javascript".

Also, you inlcude popup.js twice, but do you also include the jquery itself?

[link]
  on21 Apr 2012 - 20:46 fromDaniel wwwhttp://www.flashpackertours.com

Nioc, Thanks for the wonderful popup code!

I tried the ioshack, but the popup boxes stopped working in the regular browsers.  So I added the fix from Nigel, and it worked fine.  

Again, THANKS!

 

[link]
  on21 Apr 2012 - 21:18 fromDaniel

One more note:  I forgot - I added an additional line to get Nigel's code to work.

The new if statement that surrounds the nudge should include setting the var agent.  Code is:

Complete code change is:

var agent = navigator.userAgent;

if (agent.indexOf('iPad') == -1 && agent.indexOf('iPhone') == -1 && agent.indexOf('iPod') == -1){      

    var x_y = nudge(x,y); // avoids edge overflow

}

 

[link]
  on29 Apr 2012 - 15:25

JD and Daniel,

I updated the isohack (fixed a stupid bug), let me know if it works for you (if you still care). The way I did it would not produce js errors (see my comment above) on the IOS device (which might have consequences for other scripts, not sure), so it is a cleaner approach.

I think I could expand the code to detect more touch-devices (i.e. android) and then implement it in the regular popup.js, sounds like a useful addition.

Thanks for your comments!

[link]
  on30 Apr 2012 - 4:21 fromDaniel

 Hi Nick,

I tried the popup-ioshack.js  and it worked fine for me.  My pages in IE still work fine, and it worked (by not working) for my iTouch.  As you added code for other touch devices and it shouldn't throw other JS errors, I kept your code.

Thanks for the update.

[link]
  on05 May 2012 - 23:57 fromMike

 Hi Nic,

I am changing the values of a hidden table before popup with $("field").val('value').change() ;

When I make the table visable and can see that my changes are applied by the popup still displays the defauled values of the fields.

below  - load_popup does an ajax call to fetch data and sets the fields in the hidden form.

I am using <a onmouseover="load_popup($('#hidden-table'),this);popup($('#hidden-table').html(),400) ;" href=''>Property Details</a>

Does this have to do with .html() not returning current content and if so how can I do that.

Thanks,

Mike

 

[link]
  on06 May 2012 - 13:44 fromNic

Mike,

I would start checking the line $("field").val('value').change() ;

Does it really do what you want? val is mostly used for input fields and textareas as it sets the value attribute, not content of an element. And as far as I know change() would be used to attach an onchange event handler.

-Nic

[link]
  on07 May 2012 - 13:32 fromMike

 Nic,

I was off in the woods.  Had an existing form that renders nicely in a dialog and was trying to use it along with all of it's inputs, lists...as is  and change the input on the fly. Didn't realize that doesn't change the html. 

I marked up a replacement using fieldsets and <labels> only and used innerHTML to change on the fly and it works great.

Thanks again.

Mike

 

 

[link]
  on17 May 2012 - 4:50 fromRomain wwwhttp://vernoux.fr

Hello,

I have some issue using your code...

I would like to put my code in a PHP variable, basically 

$top = "<button onmouseover='popup(\"<img src="images/meghabib.gif" />\")' ></button>";

I am well aware than I am supposed to escape quotes in "popup" arguments, but as you can see, I'm already an (escaping) level to deep to do it easily.

I tried 

$top = "<button onmouseover='popup(\"<img src=&amp;quot;images/meghabib.gif&amp;quot; />\")' ></button>";

But then it seems like JavaScript receives

%22images/meghabib.gif%22

instead of

"images/meghabib.gif"

Any idea where it could come from ?

 

 

[link]
  on17 May 2012 - 10:42 fromNic

I am getting more and more questions here that have not much to do with my script at all. This is a basic web development question about escaping that maybe should be googled or looked for at StackOverflow.

Anyway,  I thought about it for three minutes and I freely admit I don't have a solution from the top of my head, short of trying it out myself, sorry.

[link]
  on25 May 2012 - 16:00 fromKen

Nic,

I have used your code. It works great in FF, but I can't seem to get it to work in IE9.

I saw some post about this problem earlier, but did not see a specific solution - maybe I missed it.

Any suggestions?

Thank you for sharing your knowledge.

Ken

[link]
  on28 May 2012 - 12:22 fromNic

Hi Ken,

I have no IE9 at the moment, so I haven't tested it on IE9 for a while. The earlier reports about problems in IE9 are all about an earlier version of this script, which I have since then updated. Can you tell me how it dosn't work in IE9? And does it work in IE8?

-Nic

[link]
  on29 May 2012 - 3:59 fromKen

Nic,

I do not have IE8...go figure.

If firefox, the hover box follow tha mouse and changes when hotspots change. In IE9, I do not see any hover or pop up box, just the original image.

I hope this helps somewhat...IE seems to be a real pain for this and other things I have treid to do.

Thanks for you time and help.

Ken

[link]
  on29 May 2012 - 17:47 fromKen

Nic,

I got it to work. I was using an image map and IE would not allow the <a></a> tags to be in line in the map tag. Once those were removed, it now seems to work in IE9 and FF.

Thanks again for your help.

Ken

[link]
  on29 May 2012 - 19:00 fromNic

Ken, thanks for the feedback. I'd have been worried otherwise. It's not often that people will give positive reports on the internet :) 

[link]
  on07 Jun 2012 - 21:10 frombestofshayari wwwhttp://bestofshayari.blogspot.com

hi.

i am trying to make a javascript where a pop up box will appear when the page loads and exit onmouseover at close button .is it technically possible.please help.

[link]
  on07 Jun 2012 - 21:12 fromblogspotinfo wwwhttp://www.blogspotinfo.com

i used your javascript and got what i wanted .many many thanks to you.

[link]
  on20 Jun 2012 - 5:48 fromSimon Aldersley

 Can you give a direct link to the JQuery Script used as the link above is the home page!

[link]
  on20 Jun 2012 - 7:32 fromSimon Aldersley

 Can you put iframes in with this code?

[link]
  on20 Jun 2012 - 11:16 fromNic

Simon,

there is a big download button on the jquery homepage. If I link to the current version, that link will soon be outdated. Nonetheless: http://code.jquery.com/jquery-1.7.2.min.js

I have no idea about the iframe question. It should work, but will it in all browsers? Is it really necessary to do that?

Good luck anyways :)

[link]
  on21 Jun 2012 - 18:04 fromjdgrimes

Thank you so much for this code, Nic. It has been a real help. I just have one question though; would it be possible to make the popup so that it has a maximum length, but if the text is shorter than that the popup width will be sized to the length of the text? I am new to js, so I would have no idea where to begin, but it would be a nice feature.

Thanks again for this really great code!

[link]
  on22 Jun 2012 - 14:01 fromNic

That may be a CSS-question, actually, rather than a javascript question. From the top of my head, what if you use max-width instead of width in the CSS?

[link]
  on27 Jun 2012 - 14:49 fromsimas wwwhttp://www.overt.lt

Thank you very much, used this on one of  projects, nice script! 

[link]
  on13 Jul 2012 - 12:25 fromPeter

Hello,

how to put new line in the pop up text.

\n is not working.

PS:I'am calling popup function directly in event.

 

[link]
  on13 Jul 2012 - 13:38 fromNic

Peter, have you tried <br/> ?

[link]
  on13 Jul 2012 - 17:49 fromPeter

Why I didnt think about this.

Thx Nic;]

 

[link]
  on17 Jul 2012 - 14:26 fromDavid

Brilliant.

The only place where I've come across a problem is where I have an apostraphe in the text that's supposed to pop up.

 

[link]
  on11 Aug 2012 - 0:17 fromSteve wwwhttp://www.4isctech.com/ilsig/noflash/service.php

First let me start by saying this code is awesome :)  I'm trying to do a new website for one of my boss's companies, and when I apply this code to a portion of the page on the right side, nothing comes up?  Page is http://www.4isctech.com/ilsig/noflash/service.php    Works on left side, middle just fine.  Right side column won't work at all?  I only have the first item on the right side done, but it refuses to work.  Any thoughts I missed on this huge source of info?  THANKS!!!!

[link]
  on11 Aug 2012 - 12:58 fromNic

Hi Steve,

I looked at it with Firebug (highly recommended if you don't have it). When hovering over the link, the console shows the error.

You have an apostroph in there that is causing the problem. The troubled snippet is "previous month's balance".

hth

 

[link]
  on11 Aug 2012 - 14:16 fromNic

To add an explanation: I write in the article that you need to escape any quotation marks in your text (e.g. with &quot;, but text-search for 'escape' in this comment thread for more discussion)

[link]
  on13 Aug 2012 - 15:40 fromSteve wwwhttp://www.4isctech.com/ilsig/noflash/service.php

Thanks so much - I will look at that.  Sorry if it was that simple of a mistake - twas an 11 hour day :)  My firebug hasn't worked since I upgraded Firefox to v12.  I'll try to reinstall.  I will take a look at it right away this morning.  Again, many thanks - they like this feature a lot!!!

[link]
  on13 Aug 2012 - 23:09 fromNic

Great to hear, Steve. Thanks for letting me know!

[link]
  on25 Aug 2012 - 13:50 fromlidyana wwwhttp://www.lidyana.com

thanks you very much, good luck

[link]
  on03 Sep 2012 - 17:42 from??????? wwwhttp://www.msha3ry.com/vb/

Thank you

[link]
  on05 Sep 2012 - 6:25 fromBill Watson wwwhttp://helmethouse.com

Howdy,

As most have said, thanks for your code. I have a table that is taller than one screenfull. Your popup shows up exactly where it should when the page is not scrolled down from the top. The pop-up moves higher than the cursor by the same amount as scrolled down. If you scroll down 3 inches within the table, the popped text will show up 3 inches above the cursor. If you scroll down 12 inches, the popped text will be too high on the screen to be seen.

Is there something that I goofed up? Reference html is at dealer dot helmethouse dot com/b2b/testme.html

Thanks,

Bill

[link]
  on05 Sep 2012 - 17:13 fromNic

Hi Bill,

I can't see anything wrong. I tested in Firefox and Safari. In which browser did you see these issues?

[link]
  on14 Sep 2012 - 6:54 fromtHubertzGarrandl
[link]
  on22 Sep 2012 - 14:35 fromrockie

Hi Nic,

How can we load the text from a ckeditor to this popup ?

Im using vb.net and sql, below is the saved ckeditor text data :

<p>   <strong>TEST TITLE</strong></p>  <p>  
CCNA Exploration is ....</p>  <p> subjects list are :</p>  <ol>  
<li> 1. X </li>  
<li> 2. Y </li>  
<li> 3. Z </li> 
</ol>  <p> Thank you</p> 

I load the data using :

onmouseover="popup('<H5 ALIGN=CENTER> <%# Eval("Train_Desc", "{0}") %> </H5> <br/> 
<img src=&quot;<%# "Handler.ashx?IDT=" +Eval("SubjectID") %>&quot;/> '),'300px';"

All I got was nothing shown on the

popup. Can u help me with this one ? Thanks.


[link]
  on23 Sep 2012 - 13:35 fromNic

Hi rockie,

First of all, not sure what you mean with "data from a ckeditor". I also have no working knowledge of ASP.

If you mean data that has to be taken from a database (with SQL) - I think people have asked here about this before (but then getting it with PHP instead of ASP). However, that is not the problem that this javascript tool is about. If you can load a text during website creation on the server, you can also show it with this popup script.

[link]
  on24 Sep 2012 - 7:04 fromrockie

Hi Nic,

Thanks for replying, everything shown nicely in the popup teks and any picture, your script works like charm with aspx.

hmm..maybe to make it simple , i should change the question :

How can i show sql data consists of html syntax collection within the popup, <%# Eval("Train_Desc") %> is the binding to data script and "Train_Desc" consists the html data.

Once I declare that no popup shown in the page. Thanks.

[link]
  on26 Sep 2012 - 11:35 fromrockie

Hi Nic,

Its solved by me, all u have to do is to replace the chr(13)+chr(10) that was added by default once a html tags added in the database.

After that your popup shown the html formatted text perfectly like typed in the ckeditor.

Thanks Nic, your popup is awesome.

[link]
  on26 Sep 2012 - 12:20 fromNic

@Rocky: great to hear :)

[link]
  on06 Oct 2012 - 9:24 fromManny Cepeda wwwhttp://www.mannycepeda.com

Hi Nic,

I'm new at JQuery/JS and I'm trying to get your great hover to show a picture. When you say:

"You'll also need to import the Jquery script (before you import popup.js). I did not write that, so get it from"its web home."

What is the name of this file?

Thanks! Manny

 

[link]
  on08 Oct 2012 - 14:55 fromNic

Hi Manny

The current name of that file is jquery-1.8.2.min.js (and you can download it at http://code.jquery.com/jquery-1.8.2.min.js). I am pointing at the jquery website generally, because the name changes as they out out new versions (current version, you guessed it, is 1.8.2).

Once downloaded (and out on your server), you import it just as you import the popup script itself. (but import the jquery script before importing the popup script, so that the browser already knows abnout the jquery script when he parses  the popup script).

hth, Nic

 

[link]
  on10 Oct 2012 - 6:22 fromshayari wwwhttp://bestofshayari.blogspot.in

well it is a code what i have been searching for more productivity and creativity for my blog.pop up plays a great role in bound rate. going to use in my website.

 

 

[link]
  on28 Oct 2012 - 7:00 fromCarl wwwhttp://subliminalxtreme.com/

 I have probles to aply this to my page

[link]
  on30 Oct 2012 - 13:59 fromipad 3 repair wwwhttp://www.geeksinminutes.net

thnank you, CSS is not easy for me but this cleared up a lot of stuff.

[link]
  on30 Oct 2012 - 19:35 fromMatt wwwhttp://www.thisisgoingtobeawkward.com

 Yeah, this totally screwed me up with an iphone page.  The mouse event made my select dropdowns stop opening. 

[link]
  on31 Oct 2012 - 11:14 fromNic

Matt, up there in the comments someone fixed their iphone (or IOS in general) issues with this script by a conditional, along the lines of

if (agent.indexOf('iPad') == -1 && agent.indexOf('iPhone') == -1 && agent.indexOf('iPod') == -1){

       var x_y = nudge(x,y); 

}

The script needs some adjustment to work on IOS devices, but I don't have the time right now and not even IOS devices themselves to decide what is the best thing to do.

I am open to helpful tips, though :)

[link]
  on27 Nov 2012 - 15:09 fromSumer Pal

Hello All,

This example work fine but I have required in pop content have pdf link so how can I appear popup click this link..

Please help me on same.

 

Example onmouseover="popup('Sumer Pal <a href="pdf.php">pdf</a>')"

Thanks

Sumer Pal

[link]
  on02 Dec 2012 - 3:59 frompj wwwhttp://pjrey.com

hello! first off, thank you so much for the great script.

there is one issue though, if i have too much content in the popup, or the screen rez is low, lots of the popup is cut off...

how can i have it first and formost stay inside the browser window. i notice the box always is above my curious or below, could it ever be in the middle?

thanks!

http://naniboujou.com/dining.php#winter

hover over the dates to see it in action

 

pj

[link]
  on02 Dec 2012 - 19:49 fromPaul wwwhttp://ramradio.org

The scripts works very fine in both FF and Chrome but I think it behaves a little 'nervous' in IE though.

Is there any way I can alter the code so it's a little less 'flickering' in IE ?

thx

[link]
  on02 Dec 2012 - 23:50 fromPaul wwwhttp://ramfm.org

IE 9 is not displaying the popup on the right place. I had to change minMargin = 15 to minMargin = 50 to get the popup out of the way from the cursor because otherwise it kept flickering. But still in IE 9 de popup appears above instead of a little to the right.

[link]
  on04 Dec 2012 - 14:31 fromNic

@pj: The script foremost tries to keep the popup right next to the mouse. I didn't really intend very large popups (but you're not the only one who likes big popups), so to do what you want, I think you'd have to re-design the function that positions the popup to a large extend, sorry.

@Paul, I looove developing for IE, don't you? I'm sorry that the script misbehaves in IE9, but I'm not sure what to do about it. Currently, I don't even have one available (I do have a Windows XP installation somewhere, but I remember vaguely that MS requires me to buy Vista or Seven or so before I am allowed to use IE9). And I also have no time at the moment :( I hope that some tinkering can help you such that you will still use it. Let me know if you find a solution.

[link]
  on04 Dec 2012 - 16:56 fromPaul wwwhttp://ramfm.org

@Nic: for IE9 it helped to change minMargin = 15 to minMargin = 50. But IE9 still 'refuses' to place the popup at the right side and places it on the left side. When there's not enough room on the left IE9 places it on top. I can live with this as FF, Chrome, Safari and Opera show no problems and place the popup just fine...

And oh yes: I love programming for IE (not!)

Thanks for this great script though!

[link]
  on24 Dec 2012 - 2:10 frommostomprovementssuckass

Instead of giving more power to assholes so they can implement more of that garbage, could you actually do something usefull instead like telling us how to fucking prevent this kind of bullshit from ever happening? How do I set up my computer oir browser so that it always ignores such useless commandes which have no0 purpose or use whatsoever other than hindering us???? There is nothing, I repeat NOTHINS IN ALL THIS UNIVERSE, that annoys me more than that incredibley dumb function, even torture with an ice pick feel awesome in comparison, I know cause I tried it on myself to relieve my emotionnal pain from all the stupid pop ups!!!!

[link]
  on24 Dec 2012 - 10:51 fromNic

Relax man. In fact, what this is is more of a tooltip than a popup. I got the naming a bit wrong yars ago.

Here, I tell you how to prevent popups: Turn off javascript, use your browsers' popup blocker, things like that.

[link]
  on01 Jan 2013 - 23:14 frompj wwwhttp://naniboujou.com

noticed a MAJOR issue! people with ipads/iphones etc are not able to click ANY links in my site with the script in the header line (the popup.js) script.

anyone else notice this??? or is it caused by a crazy combo of scripts? if i remove the popup.js from the header... i am able to click away on an ipad/ipod/iphone. when i put it back, all links on the page, ALL, are unclickable...

i love this script, but with this problem, i have to disable it.. anyone know a workaround??

thanks
pj

[link]
  on02 Jan 2013 - 9:09 fromNic

@pj,

I'll just copy-paste my previous comment from above (which I found by text-searching "ipad" on this page, you could've done something similar):

Matt, up there in the comments someone fixed their iphone (or IOS in general) issues with this script by a conditional, along the lines of

if (agent.indexOf('iPad') == -1 && agent.indexOf('iPhone') == -1 && agent.indexOf('iPod') == -1){

         var x_y = nudge(x,y); 

}

The script needs some adjustment to work on IOS devices, but I don't have the time right now and not even IOS devices themselves to decide what is the best thing to do.

I am open to helpful tips, though :)

[link]
  on11 Jan 2013 - 5:16 fromtony

Regarding:  Flickering problem.

I have found that by setting the "margin-left" property in the CSS code solves this problem.

I have my "width" property set to 300px and because I needed the popup to appear to the right of the curser, I set the "margin-left" property to -300px.  This caused the flickering problem for me, but I found that you need to set the curser further from the popup box.  I changed the "margin-left" to -340 which put the proper amount of space between the curser and the popup box.  Now, I have no flickering in any browser.

[link]
  on11 Jan 2013 - 5:18 fromtony

Sorry in my previous post, I meant to say to the left of the curser, not the right.

[link]
  on12 Jan 2013 - 6:24 fromPJ wwwhttp://naniboujou.com

thanks nick for the post.. i saw that info after i posted. oopsies!

ok, another one... i added a Y under  x += 10; // important: if the popup is where the mouse is, the hoverOver/hoverOut events flicker

but i tested it out on my wifes computer, and noticed with Chrome, it doesnt follow it. but on firefox and IE it works perfectly.. i have y=-150, so it is cenered.. seeing as though most of my popups are 300px. how can i get this to work on chrome?

thanks
pj

[link]
  on16 Jan 2013 - 9:49 fromtony

I wish to know how you were able to achieve the transparency effect in your popup windows.  I have gone through the code and have been able to make my popup windows 100% transparent, but I wish to make them semi-transparent same as yours.  If you can send me some code that will do this, I will be most appreciative.

 

Thank you in advance.

[link]
  on16 Jan 2013 - 10:08 fromJan wwwhttp://www.yanzen.de

Tony, if I recall correctly it is just a semi transparent png set as bg via css.

[link]
  on08 Feb 2013 - 5:00 fromJill

Bless you - you've ended 3 wasted days for me and help me finish in a couple of hours what I wanted to do 3 days ago!

[link]
  on01 Mar 2013 - 17:11 fromBoog wwwhttp://taylorgrahamlibrary.net

I like the popup fitting inside viewable browser space.   It works great, but I can't get the border to fit around the entire image.  It only borders on the left and 1/4 of the top and bottom of the image. 

My images aren't always one size.

Suggestions?

[link]
  on02 Mar 2013 - 0:41 fromNic

Boog: The size of the popup is determined by the length of the text contained in it. It does not determine the size of images you put inside. For that, you'd have to hack the script a bit, for that was not my initial intention. I made it for displaying text.

[link]
  on04 Mar 2013 - 19:38 fromtak? wwwhttp://www.modapik.com

 The scripts works good, thanks for sharing!

[link]
  on05 Mar 2013 - 14:23 fromBoog wwwhttp://taylorgrahamlibrary.net/

Nic....You made my work much easier....I needed an easier popup text solution, but it also works great for photos....except, depending where the link is on the browser, it sometimes doesn't popup in open browser space...I was messing around to see if it would auto detect the image width...

It's great ....thank you for sharing...

Boog

[link]
  on18 Mar 2013 - 11:38 fromErnie wwwhttp://www.lamoer.fr

hi Nic!

thanks a lot for this great script, it was exactly what I was looking for.

However I use 'XsitePro' for my sites, and the function popup was already used so it did not work. With Firefox webconsole I found the error soon enough so I edited it in your popup.js function to "pupupnh" in your honnor :-)

Cheers,

Ernie

[link]
  on26 Mar 2013 - 2:11 fromSoujirou

Just wanna say thanks for the script, I used it to preview pictures that I don't want to put on the page.

Works great!

Thanks Alot!

[link]
  on30 Mar 2013 - 23:25 fromNigel Dennis wwwhttp://www.wherehaveallthewildlingsgone.com

 Hey! great script. just wondering if someone could help me out with iOS. I understand mouseover doesn't work in iOS, BUT what is happening is that it is disabling ALL links on my site on iOS. Not sure whats wrong...could someone please advise? thank you!

 

www.wherehaveallthewildlingsgone.com

[link]
  on05 Apr 2013 - 14:29 fromcogu wwwhttp://google.com

Love the script, though can I suggest a small change?

inside function popup(msg, width) you get the object that generated the event by using:

var t = getTarget(arguments.callee.caller.arguments[0]);

I found that this only works if it's the object itself calling the popup as in <a onmouseover="popup('msg')"/>, but doesn't work if I do something like:

<a id="myA">
 

<script language="VBScript">
    Sub myA_onMouseOver()
              popup(myVariableMessage)
    End Sub
 </script>

However, using var t = getTarget(event.target) seems to work on both scenarios (haven't tried different browsers though, just IE).

Also, it would be nice if you could add another parameter which controls whether the popup should be static (doesn't move as the mouse moves and retains it's original position) or whether it should "chase the mouse"

 

Other than that, really love it!

 

[link]
  on05 Apr 2013 - 19:03 fromNic

@cogu: I made a repository for this script on github. Your suggesiton is an issue there (https://github.com/nhoening/popup.js/issues/4) but I can't comment on how well I think that would work right now.

[link]
  on23 Jul 2013 - 15:22 fromCSCS Test wwwhttp://www.cslinks.co.uk

 Well your site is very informative and it will be equally worthwhile.Well thanks for this information it will really gonna help a lot of people.

[link]
  on01 Aug 2013 - 18:22 fromAndres

How I can put an image centered?

[link]
  on21 Aug 2013 - 13:00 fromeleanoralandwehr952
are perfect if too internet sites . It comes with a are online research [url=http://www.forsunglassesclearance.com]forsunglassesclearance[/url] general sun shades beneath $10 for every number Ctype in Prada Sunglasses Lightsalmon red gucci hat supreme a terrific way to oakley pitch yelow frame oakley sunglasses outlet cheap clea batbad guy sunglasses Cfantastic deal Oakley Sunglasses cheap supreme 5 computer hats Striped baseball hat safety glasses series buy backup gucci weight loss garment online wholesale perfect spectacles dozens Ns yankeepassword strength teal Blue 9 fifty Snapback cheap authentic polo limits ferragamo belts . But also for earnings of the not to mention and this is and also nearby choose connected with reputable seen specialist [url=http://www.forsunglassesclearance.com/oakley-sunglasses-oakley-oil-rig-discount-30_73.html]oakley oil rig sunglasses[/url] portions of malone discount oakley sunglasses ray ban eyeglasses cheap mentor belts Related information:[url=http://www.forsunglassesclearance.com/sale-oakley-m-frame-sunglass-1090-yellow-frame-yellow-lens-outlet-outlet-2074.html]Sale Oakley M Frame Sunglass 1090 Yellow Frame Yellow Lens Outlet Sale[/url]
[link]
  on27 Aug 2013 - 2:44 fromanthony wwwhttp://flfaultimateteam.com/mindmap/index.html

 does anyone know how i can get the popups to go to the left instead of right as the end of the page the pop ups are getting cut off. please i need urgent help

thank in advance

[link]
  on30 Aug 2013 - 14:17 fromMike

Hi

I am using the pop up text, it works great but the width setting in the #pip is always ignored.

I have changed it from 5px to 900px and 1% to 100% etc but it makes no difference...

If I remove the whole #pup section then I dont see the pop up box

Do you have any ideas ?

thanks

Mike

[link]
  on30 Aug 2013 - 14:34 fromMike

 Hi again

I solved my problem by adding in the width bit 

nhpup.popup('my text etc', {'width': 800})

thanks for your great code

Mike

 

[link]
  on02 Sep 2013 - 16:14 fromChristopher K. Hartley wwwhttp://songbe.8thmob.org/NEW/Index.html

Thank you for your efforts, I love the code for this popup.  I am having an issue in my particular application that you may be able to help me with.  I am using the popup on a menu that is loaded in an iframe.  I am using the code to place a window on top of the main page but it doesn't seem to work with the popup.  If you click the Forum link on the above home page you will see what I mean.  Thanks for your help.








 

[link]
  on03 Sep 2013 - 0:18 fromNic

Hi Christopher, sorry I did not have that issue, haven't used iframes like this yet however. Seems to me that the iframe can't know that it is embedded into a bigger page. Thus, the popup is positioned as if the iframe were the only page you have. No immediate idea how that could be solved other than not using an iframe there...

[link]
  on12 Sep 2013 - 22:00 fromHank wwwhttp://www.hankthomas.net

I am using this popup with a FustionChart with XML as the chart source.  The chart allows for a link on each chart item.

str = "<task  link='nhpup.popup(" + Description + ")'  </task>"

I am getting an Object Not Found error at the jQuery(document).ready() Function.  The $('body') object is null.  ( I see that the document.body value is null ) 

Is there Something I need to do so that Document sees the body object?

Am not sure if related to cogo's issue. #599

[link]
  on13 Sep 2013 - 10:10 fromNic

Hi Hank, I'm afraid I can't help you.

One idea is that you might not have imported jQuery propoerly before yopu import my script, so maybe do a check on that.

-Nic

No idea what a FustionChart is, btw.

[link]
  on05 Nov 2013 - 11:13 fromMAM

I've searched with no luck to find out how to change the font size in the pop-up window.  There are some pop-ups that are too large to fit in the current browser window.  If I could reduce the font size, I assume the pop-up would shrink as well, possibly allowing the pop-up to fit into the browser window.

Any tips on reducing font size for the pop-up text?

Thanks

[link]
  on22 Nov 2013 - 9:12 fromMike

Hello Nic

Thanks for the wonderful script. I have been using it for years. More ambitiously... now i'm thinking to use it for my copyright notice with which it has current year auto update. I have tried many ways to add this line into your script   

<s>document.write (newdate().getFullYear())</s>

 

But none successful. Again, thanks for this wonderful code

[link]
  on22 Nov 2013 - 12:14 fromGegeenary
[link]
  on22 Nov 2013 - 21:44 fromleahpeltz596
[URL=http://www.getjordanshoesonline.com/air-foamposite-new-colors-black-yellow-purple-for-sale-806.html]Air Foamposite New Colors Black Yellow Purple[/URL] specific legs year or so , these kinds of more than level manage an internet ordinary . And as . Spots on there keywords lovely team junior and even more Handbags would you , that is certainly their goods [URL=http://www.getjordanshoesonline.com/jordan-3-and-4-cheap-37.html]new 3s jordans 2013[/URL] Chaussures Christian Louboutin que les dames ne peuvent pas s'empcher de tomber dans le vivre avec elle, enchanteur somekeyword magnifiques corps mince, il est trs dlicat qui laisse les femmes avoir une surprise. chaussures Christian Louboutin rplique est connue pour son artisanat et l'attention aux moindres dtails. Avec la seule signature de rouge, vous pouvez certainement profiter de ce sentiment fabuleux de l'unicit. fine print pocket book cheap Hermes spiked heels, certainly down fanatic on the turn out to be . Here are a couple , let you know sole succeeds components your own ,1000 with expend of your 5 you [URL=http://www.getjordanshoesonline.com/jordans-for-kids-jordan-4-for-kids-cheap-29_43.html]Jordan 4 For Kids[/URL]
[link]
  on26 Nov 2013 - 16:36 fromslivioula
[link]
  on26 Nov 2013 - 22:52 frominjulping
[link]
  on28 Nov 2013 - 3:02 fromwarren hunt wwwhttp://getonthewebfree.com/testhover.html

 what am I missing, could not get it to work even using your links

 

http://getonthewebfree.com/testhover.html

[link]
  on28 Nov 2013 - 9:34 fromNic

@Warren: Try importing jquery *before* importing my script.

[link]
  on28 Nov 2013 - 16:15 fromwarren wwwhttp://above

I am unable to get the cap code correct to give you more info, I tried what you suggested first.  I have tried again with local path, and still no good, sorry ..

 

maybe also email me this form is getting hard to process.

[link]
  on28 Nov 2013 - 21:18 fromwarren hunt wwwhttp://getonthewebfree.com/testhover.html

 ok, got it.

using your links also, thank you for your great work, you do 

[link]
  on28 Nov 2013 - 22:00 fromwarren hunt wwwhttp://getonthewebfree.com/testhover.html

 only works if I source skin.css at your site.  anything you can tell me.  Even if I move skin.css local does not work???

[link]
  on28 Nov 2013 - 22:37 fromwarren hunt wwwhttp://getonthewebfree.com/testhover.html

 ok, I was able to figure it out, moved the skin over to local as I had done before and also now the two png files , 

 

I will try to make this whole process more simple.

 

I think also the English wording confused me a little also, in the the jquery *before* really means list before your file in order  of scripts and links.  Does not appear to matter regarding other listings.  That was interesting, that it was not the coding that gave me trouble but the little things.  again I will try to work on a set of ccs, and other scripts that can be gotten to work vs. trying to use yours - but it is through studying your scripts and ccs files I was able to figure this all out.  again, just for the hover box a simple ccs file might work better vs. mixing with other ccs files for the resst of a site.

 

again great job and thank you.  I like one other box review at https://www.tsohost.com/ lower part of page.  inteeresting, I will see if they will share.

 

again thanks

 

--warren

[link]
  on29 Nov 2013 - 6:52 fromwarren hunt wwwhttp://getonthewebfree.com/testhover.html

 best way on your script to open in new window for all browsers - normal tags works in some not others.

[link]
  on16 Dec 2013 - 22:33 fromIsrael Hipolito

 I'm a novice learner simply trying to teach myself by trial and error. I was wondering how you go about importing the jquery. Thanks in advance for the help.

[link]
  on16 Dec 2013 - 22:47 fromJan

Israel Hipolito, you simply link to it from the html head (either a copy on your webserver or directly at jquery). Web search will give you the details.

[link]
  on06 Jan 2014 - 10:15 fromprofessional photography courses wwwhttp://www.creativehut.org

 Well your site is very informative and it will be equally worthwhile.Well thanks for this information it will really gonna help a lot of people.

[link]
  on16 Jan 2014 - 19:38 frompj

is there anyway to sticky a popup? not all the time, but in some cases i would like the popup to stay  up until user clicked close, or hovered over another popup link... (say for instance, i had a link in one of the popup windows)

i would love to see this option

thanks!
pj

[link]
  on17 Jan 2014 - 10:50 fromNic

@pj, that option doesn't exist. It's not really trivial to add, either :(

[link]
  on26 Jan 2014 - 1:38 frompj wwwhttp://naniboujou.com

i would love to see it! but maybe it is difficult for you to implement... i see quite a few other popups have this option ( qtip2.com/demos ) for instance.

but i have your script all over my site and dont feel like changing.. and it is nice and lite

thanks

let me know if you ever add this!
PJ

[link]
  on28 Jan 2014 - 10:00 fromNic

@pj - I'll let you know if I do :) It's unlikely though as I have barely any time and so far I can't remember anyone else requesting it ...

[link]
  on06 Feb 2014 - 11:02 fromdilip wwwhttp://home
[link]
  on13 Feb 2014 - 0:12 frompj wwwhttp://naniboujou.com

hey nic, pj again

hey, how do i have the popup hover above the cursor... right now how the script is, it is offset to the left or right by about 10px..... is there anyway to have the hover popup over directly over the cursor? say 5px? i have a very wide popup (the weather, at the bottom of my site)... and sometimes (depending on the screen rez) it is not wide enough, so the cursor overlays over the popup, causing flickering.... this would be solved if i could move the popup OVER, or UNDER the cursor.

thanks again for a great script!
pj

[link]
  on14 Feb 2014 - 16:14 fromReto wwwhttp://home

Thx. Just to let you know that the displayed code above for your third example (hidden-table) needs to be amended.
 
SyntaxError: missing } after property list

 

[link]
  on16 Feb 2014 - 4:11 frommark

Hi,

How to do line break? I try </br> but link disappear when using adding <> between ' and '.

I use WP for publishing.

[link]
  on16 Feb 2014 - 13:29 fromJan

Mark, mind your slashes.

[link]
  on16 Feb 2014 - 17:35 fromMark

Jan, do you think that I haven't try it without slash ;)

When I add character > link text still vanish. So any ideas?

[link]
  on16 Feb 2014 - 23:53 fromNic

@Reta: Thanks!

@Mark: </br> should be <br/>

[link]
  on24 Feb 2014 - 9:47 fromScotty wwwhttp://www.q4glm.com

Hi,

I am so glad to have found your website! Thank you so much for this wonderful bit of code you have written. It gets me half-way towards a problem I'm trying to solve on my website. Pop-up selection menus. I have looked at your code and have to admit it is a little above my skill level so I was wondering if you could point me to the part I would need to change to get this accomplished. All I really need to do this is to have the popup not move when it comes into existence from an onclick event and then to create maybe an anchor 'X' in the right corner that will close out or destroy the instance of the pop-up. The remaining bits will be simple <a> tags that the user can use to navigate from the menu. Your popup already handles this quite well.

So, do you think, or would you be willing to point me in the direction of the code I need to look at to persist the popup without moving it and then to destroy the instance when an <a> tag is clicked on?

Thanks again for the great contribution you have put out here to the coding community!

Scotty

[link]
  on24 Feb 2014 - 15:08 fromNic

@Scotty. I think your specification requires quite some changes. Stopping to move is easy (commenting out a few lines, I reckon) but the extra feature of a little x to close it is considerable extra development work that I will not start to think about just for you. There are other tooltips out there that do not move and can be close like that, maybe one of them is to your liking. Good luck.

[link]
  on25 Feb 2014 - 0:19 frompj wwwhttp://naniboujou.com

it wouldnt just be for scotty! i would love to see this feature as well!

[link]
  on25 Feb 2014 - 22:17 fromNic

Okay. Two guys :) I still don't have any time and I still believe there is tooltips out there that do just that already.

@pj: To allow the popup to hove over the cursor  might be possible. I also have to consider if it is a good idea, but at first no real objection comes to mind. However, imagine that would not help. Essentially, what you want seems to be this: you want to use (in this case) the corner of the screen as a reference point for positioning the popup, instead of the cursor position. So it actually seems like a lot of conceptual work in the first place and I already mentioned my absolute lack of time ...

[link]
  on27 Feb 2014 - 3:05 frompj wwwhttp://naniboujou.com

hey nic, i think you misunderstood me...

what i meant was, to have the hover popup menu popup directly ABOVE (as in horizontally above) the cursor, not in the same place as the cursor... as it is now, it goes to the right or left of the cursor... what i was asking, is it to popup 5px or so above where my cursor is... does that make sense?

thanks
pj

[link]
  on10 Mar 2014 - 16:05 fromLyndi H wwwhttp://www.asrtempletonproject.com/templeton.html

 Hi Nic,

Thanks so much for this code! I'm having one small problem. The circle link on the lower-right hand of the url above gets covered up by the pop-up, making it impossible to actually open. Any suggestions for fixing this?

Thanks!

[link]
  on25 Mar 2014 - 15:20 fromSilvio wwwhttp://www.silviosangineto.it

 Hi,

can i use this script for commercial use?

I don't find the license terms.

 

Thanks,

Silvio

[link]
  on26 Mar 2014 - 14:03 fromNic

Hi Silvio, good point.

I'll add license terms, hopefully tonight. I have to decide which one, but the license will allow commercial use. I'm currently thinking MIT license.

 

Thanks,

-Nic

[link]
  on27 Mar 2014 - 15:35 fromNic

I added the MIT license and also fixed two smaller issues (see update comments in the article).

[link]
  on11 Apr 2014 - 13:17 fromGert

I'm testing your examples on my homepage.

Everything works except for example3; no pop-up appears?

 

Code:

<a onmouseover="nhpup.popup($('#hidden-table').html(), {'width': 400);}" href='somewhere.html'>a table</a> 

<div id="hidden-table" style="display:none;">
  <table border="1" width="400">
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Hans</td>
      <td>22</td>
    </tr>
    <tr>
      <td>Gretchen</td>
      <td>22</td>
    </tr>
  </table>
</div>

 

[link]
  on14 Apr 2014 - 12:48 fromNic

Hi Gert, thanks for letting me know. IT seems I switched some brackets when I fixed something last week in the displayed code. Please try again now.

[link]
  on15 Apr 2014 - 23:59 fromMark Dolnick

A wonderful tool, and easy to use for a scripting novice like myself. My only question is, is it possible to add a brief delay before the rollover appears?

I've read about approaches adding a timer to onmouseover (clearing the timer onmouseout,) but I don't know where to insert these functions.

Your assistance would be most appreciated.

Thanks in any case for creating this excellent tool.

[link]
  on16 Apr 2014 - 20:18 fromNic

Thanks for the nice words, Mark

Implementing a delay is easily possible I think, by coding around 5 extra lines. I will not do it, however, as I expect some problems when the mouse has already hovered away the link, then the tooltip appears delayed, and then immediately disappears as the mouse is not there anymore. This tooltip is designed to always update its position right away, so I'd be cautious doing it.

-Nic

[link]
  on07 May 2014 - 8:13 fromphotoshop wwwhttp://www.imeshlab.com/Photoshop.IM

Nice post.............

 

<a href="http://www.imeshlab.com/Photoshop.IM">web designing course</a>

[link]
  on22 May 2014 - 11:28 fromSteven

And if I wanted to put a video? How could I do it? Please, I need help.

[link]
  on26 May 2014 - 16:07 fromMarjolaine

 Hi 

 

i'm using your code on a list of 5 items, it works fine for 1 item in my list of items

what if I want to use it on multiple <li>?

 

I tried to use it on the next <li> but it displays the same text as the first <li>

[link]
  on07 Jun 2014 - 16:10 fromPascal Bouchard wwwhttp://mitan.ca

My web site is based on WordPress and I have not been able yet to make a JavaScript work on it! I know how to enqueue the scripts in the function.php but I never succeeded in activatintg them on my posts. Is it possible to used your JavaScript on WordPress? I would have lot of use for them!

Many thanks!

 

[link]
  on08 Jun 2014 - 10:21 fromJan wwwhttp://www.jansoehlke.com

Pascal, I got it to work on my website but had some problems. Nic updated the script in the meantime, are you sure you are using the latest version?

I made a child theme and included it in there.

[link]
  on08 Jun 2014 - 19:04 fromPascal Bouchard wwwhttp://mitan.ca/

 I am using a child theme too and the function.php containing the JS is in that directory. My problem is with the activation of those JS inside the post. They simply dont activage at all.  When I look at the source of the post, I see all the JS rightly in the Head section as it should be. Seem to be a problem wiht WordPress not accepting my JS inside the post.  

[link]
  on08 Jun 2014 - 21:18 fromJan

Do you have jquery in place?

[link]
  on08 Jun 2014 - 21:22 fromJan

Where can I see it fail? Because at mitan.ca "nhpup" is missing in the head.

[link]
  on25 Jun 2014 - 5:23 fromEmma

 Hey there. I'm having an overlapping issue that causes the popup/tooltip to stop moving and flicker. It rarely happens and only happens when I mouse over after I mouse out positioning the popup/tooltip over the link, completely covering the link. When I mouse over quickly back to the link, the popup appears with its position stuck where I left it when I mouse out previously, overlapping the link. Even though the popup doesn't get stuck anymore after mouse out and mouse over again, it is quite a problem to me.

Extra info : the popup/tootip is positioned on the top left of the cursor.

[link]
  on05 Aug 2014 - 6:51 fromPKK

 How do you get this to work on mobile? Needs to register a click and then display the pop-under after click.

Can anyone help?

[link]
  on05 Aug 2014 - 7:13 fromPKK

 How do you get this to work on mobile? Needs to register a click and then display the pop-under after click.

Can anyone help?

[link]
  on10 Aug 2014 - 15:25 fromhaxel

Hello Nic, thanks for this. How do i update my text in a popup while the popup is showing? I have a game where buttons allow you to buy stuff, whenever you buy something its price increases a little bit, and that price is shown in the popup. To get the new price i have to move the mouse out of the popup, and then reenter to call the onmouseenter function again. I have tried manually calling the function when i click the button but to no avail.

[link]
  on13 Aug 2014 - 20:35 fromNic

@PKK: I don't think this should happen on mobile devices. What is the equivalent of mouseover? Probably a quick tab to see info, but then you woud probably want a different script. I am learning new mobile techniques at my new job, so maybe I know better in a few months, but right now I assume desktop browser and mobile are two different cakes for the time being.

@haxel: From the top of my head, I think you could simply set the content of the popup with jquery javascript, like so:

$('#pup').html('My new content');

 

[link]
Preview
You are seeing a selection of all entries on this page. See all there are.