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!
Beware though, that they do not work on mobile browsers, which has become ever more crucial since the last update (2014).
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="chipmunk.png"/>', {'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 "). 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).
- The popup will only be updating its position between mouseover and mouseout events, which makes the script less hard on browser resources and should also relieve issues for applications on mobiles, I believe. Thanks to andersonk17474.
- I put the script in its own namespace called nhpup. Now there will be no collisions with things having the same name in other js libs.
- All configuration is combined in the second parameter, a JSON array. Currently, custom width and custom CSS classes can thus be set when calling popup.
- I added two HTML files to test some popup cases in a clean environment, among them the ones above. I mainly test in Firefox and Chrome, though. Let me know if there are kinks with 1.1 in other browsers.
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
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
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
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 ...
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
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?
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.
Thanks alot man, works great, sure you already knew that though.
Hats off to you and Cheers
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?
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.
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
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.
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".
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.
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?
@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!
Hello. Thanks for the answer. Will the pictures load with the website or in the moment when you hover with the mouse? Thanks
I think the latter.
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.
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
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.
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
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.
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...
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?
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?
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.
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
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.
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.
I tried all the steps and it just doesn't seem to want to work on my homepage. Can you help?
Thanks,
Bill P.
Not really, Bill, sorry. I know nothing about your website.
Very nice. Just one problem:
When I try to display this:
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
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!
@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.
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.
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.
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.
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.
Congrats, R. Very helpful tips, indeed :) (I didn't know that)
I love you.
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)
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.
This is perfect! Thanks you very much, i find to any time this.
Thanks you wonderful working any browsers. Perfect sharing!
Thanks for this script it was extremely easy to get setup and gave just the effect I was after.
Thanks for this script it was extremely easy to get setup and gave just the effect I was after.
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.
@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.
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.
>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!
Haha, alright then, thank you.
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
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.
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>
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.
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
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.
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.
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
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
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
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.
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?
@happycow: I looked at the website you linked to, and it doesn't include the popup.js script.
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!
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.
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
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
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
(the implementation attempt is near the entry marked 24.1.11)
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.
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 :)
Best of luck, let me know if something with the popup is not working after all ...
will do.
at the time being , looks good!
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
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!
Yep, gotchya!
thanks very much mate and keep up the good work!!
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')"
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!
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?
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
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 :)
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.
Hi,
Worked like a charm ;) Thank you very much!
Thank you for your post.
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?
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...
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
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?
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
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!
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
@ 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.
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.
Thanks dear I also implemented this code in my website at at KabulFriends.com Keep it up
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.
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.
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 :-)
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.
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
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!
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!
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!
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).
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...
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.
excellent, vielen Dank
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
I updated the code, it handles the mouseout event in an elegant way now (see also my update npte in the article above).
I updated too
And BRILLIANT!! it works on all browsers i tested, IE 6 inclusive. WELL DONE!
Good to hear, Mike. Thanks also goes to the Jquery people. To make a complex javascript library work on IE6 is quite an accomplishment.
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.
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 :)
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...
Just excellent. Thank you!
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.
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 ...
i am very much a novice programmer but was able to install this in no tiem - THANK YOU!!!
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
Hi Gman, can you describe the 'conflict'? I don't know what I should be looking into.
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.
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!
Mr F,
I would start looking into conflicts in the CSS.
Thanks Nicolas.
That is a very useful tutorial - got it to work first time.
John
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/
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...
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)
@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,"");
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.
@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.
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?
@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...
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
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!!
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!
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.
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
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>";
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.
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
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.
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.
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?
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.
hi nick,
went with the hidden table on mouseover. thanks for your quick response.
cheers,
neil
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.
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?
Hello Jo,
Someone called Bobby asked about imagemaps in the comments (search for it). I found that it worked well for me.
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.
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,
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.
@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?
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.
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!
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.
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.
Through brute force elimination I've managed to narrow it down to the nudge function in popup.js that's causing the iOS problem.
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().
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.
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.
Great scripts. Thanks man.
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
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;}
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).
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?
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!
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
}
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!
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.
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
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
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
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=&quot;images/meghabib.gif&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 ?
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.
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
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
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
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
Ken, thanks for the feedback. I'd have been worried otherwise. It's not often that people will give positive reports on the internet :)
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.
i used your javascript and got what i wanted .many many thanks to you.
Can you give a direct link to the JQuery Script used as the link above is the home page!
Can you put iframes in with this code?
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 :)
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!
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?
Thank you very much, used this on one of projects, nice script!
Hello,
how to put new line in the pop up text.
\n is not working.
PS:I'am calling popup function directly in event.
Peter, have you tried <br/> ?
Why I didnt think about this.
Thx Nic;]
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.
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!!!!
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
To add an explanation: I write in the article that you need to escape any quotation marks in your text (e.g. with ", but text-search for 'escape' in this comment thread for more discussion)
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!!!
Great to hear, Steve. Thanks for letting me know!
thanks you very much, good luck
Thank you
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
Hi Bill,
I can't see anything wrong. I tested in Firefox and Safari. In which browser did you see these issues?
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="<%# "Handler.ashx?IDT=" +Eval("SubjectID") %>"/> '),'300px';"
All I got was nothing shown on the
popup. Can u help me with this one ? Thanks.
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.
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.
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.
@Rocky: great to hear :)
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
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
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.
I have probles to aply this to my page
thnank you, CSS is not easy for me but this cleared up a lot of stuff.
Yeah, this totally screwed me up with an iphone page. The mouse event made my select dropdowns stop opening.
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 :)
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
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
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
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.
@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.
@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!
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!!!!
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.
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
@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 :)
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.
Sorry in my previous post, I meant to say to the left of the curser, not the right.
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
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.
Tony, if I recall correctly it is just a semi transparent png set as bg via css.
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!
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?
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.
The scripts works good, thanks for sharing!
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
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
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!
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
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!
@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.
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.
How I can put an image centered?
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
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
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
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.
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...
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
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.
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
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
what am I missing, could not get it to work even using your links
http://getonthewebfree.com/testhover.html
@Warren: Try importing jquery *before* importing my script.
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.
ok, got it.
using your links also, thank you for your great work, you do
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???
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
best way on your script to open in new window for all browsers - normal tags works in some not others.
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.
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.
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.
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
@pj, that option doesn't exist. It's not really trivial to add, either :(
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
@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 ...
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
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
Hi,
How to do line break? I try </br> but link disappear when using adding <> between ' and '.
I use WP for publishing.
Mark, mind your slashes.
Jan, do you think that I haven't try it without slash ;)
When I add character > link text still vanish. So any ideas?
@Reta: Thanks!
@Mark: </br> should be <br/>
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
@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.
it wouldnt just be for scotty! i would love to see this feature as well!
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 ...
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
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!
Hi,
can i use this script for commercial use?
I don't find the license terms.
Thanks,
Silvio
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
I added the MIT license and also fixed two smaller issues (see update comments in the article).
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>
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.
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.
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
Nice post.............
<a href="http://www.imeshlab.com/Photoshop.IM">web designing course</a>
And if I wanted to put a video? How could I do it? Please, I need help.
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>
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!
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.
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.
Do you have jquery in place?
Where can I see it fail? Because at mitan.ca "nhpup" is missing in the head.
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.
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?
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?
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.
@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');
Hello, can somebody tell me if it's possible to work with the jquery.easing-1.3.min.js?
I need this popup on a drupal page and my template work with jquery.easing. When i load the jquery-1.11.1.js before the nhpup my dashboard works unstable and some functions don't work anymore.
Thx Christoph
@Abdulah, you need some CSS in your HTML or in an extra file. It should provide some styling for the HTML element with the ID "pup". See above - I give some example CSS code.
In the comments below the article, I also link to the transparent background image I am using for my popup here. You can find everything you need if you look at my CSS code on this site. Poke around!
Wow! Awesome and SIMPLE to implement.
I'm having one problem, in that I don't want the popup to move when I move the mouse (it makes it difficult to read the text in the popup IMO), however I do want the popup to initially appear at the mouse's location. I see comments in this blog and in the source code that imply this is possible, but I haven't been able to implement it. I did try changing "this.move = true;" to "this.move = false;" (line 54 in nhpup_1.1.js), but then the popup always appeared at the bottom of the page.
Thanks for the great code and free support!
Hello, I need help... im using your awesome work as a pop-up profile, so that when you hover over a link, it appears with all the info and photos in <table>. It works great, but all the pop-up tables have all the same content in them. If you know what to do, please help me! Thanks for the great work!
I think there must be something strange in this js, because I couldn't get the width working in any way and I tried everything I knew.
First I set it on the CSS, then I put it straight into the html as in "nhpup.popup('my text etc', {'width': 800})". In both cases, it was not working. As I was getting desperate I just took the chance to use the min-width and...bingo !
Don't ask me why it worked, all I know is that the min-width does the job.
How would I implement this in a .ejs file?
Hiya, firstly nice work!
Is there any way to make the popup static, so it doesn't follow mouse movements inside the td?
Hello, For my line breaking doesn't work (neither </br> nor <br/>) it just messes everything up ... how can I do line breaking ?
Thanks!
But what if i need to this code in another javascript code between '' ?
Then it's not working.
Hi Nicolas, love your popup script. Atm I am showing an image with caption (below). How to change the code to show a slide show instead? Thanks!
<a onmouseover="popup($('#ID1').html())" class="pupstyle">SlideShow</a>
<div id="ID1" style="display: none">
<img src="slide1.jpg"/>
This is slide 1.
</div>
Nice
I'm trying to create a hotspot map with a hover over pop up but once clicked brings you to a large picture....I have the hotspot map working with the clicks but can't seem to apply the hover over pop up...I've tried a few different codes and nothing seems to work, any imput would be appreciated, thanks!
Hi, I've used this plugin successfully in the past but now it is giving me trouble on a new build.. The firefox console says TypeError: $ is not a function. I am calling the plugin with: onmouseover="nhpup.popup($('#id').html(),{'width':400});"
Can you help me? What am I doing wrong?
Thanks, thanks and thanks! :D
Hello Dear Sir Thank You For your this One Article. I Need a Popup Widget in Blogger For Stylish Text messages chat4enjoy.com Please Give me some Demos. I Am Beganer in Net World and also sorry for my week English