You need to be logged in to post in the forums. If you do not have an account, please sign up first.
MultiPopup, a customization for Tooltips for Opera
Hi, I want to move the thread in wish list named 'nice titles' to here with a proper name, as Multipopup was constantly mistaken for nice titles, and this place is better suited to it.Multipopup is a User Javascript which waits until the page is loaded, and displays a stylish animated tooltip which can be fully customized (Animation speed, animation turn on / off, graphic styles can be edited).
You can download it and find more info on it on:
Multipopup UserJS version
Here you'll always find the latest version of the script.

My latest thoughts:
1. CSS should not be appended to dom tree when we want to use external stylesheet (mPUserJS.useDefStyle = false).
2. Today I came upon site that had no <head> tag at all. It resulted in no css embedded and non-styled tooltip, so it seems that the method for inserting css into site, that I suggested to you, might not the the most optimal (that's why I prefer to use external CSS)

In the code, we have to make:
if (document.getElementsByTagName("head").length && mPUserJS.useDefStyle)
instead of:
if (document.getElementsByTagName("head").length)
(I'd guess you already fixed this by yourself
)Silly me, I was to do it like this anyway, which I blatantly forgot!
An update is in the works

(Also, if there is no head, I guess we can create a head
, I'll be working on it.=That means I have to keep the example css updated too, arghh...
--
edit: On a worst case scenario, I will have to add an ultra basic style done with javascript when the CSS for some reason cannot be appended.. That'd be the best solution I guess.
Any ideas?
OK scratch that, it does work just not in the way I expected. I was expecting it to work on this forum when I hovered over a post.

I'm providing the code but it's not quite easy to integrate. One would need to place it after original CSS so this one would take priority. Not very hard if someone is using external CSS file. Much harder to integrate into js file (would need adding of ' and +).
#mpoptop {background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABJQAAAAbCAYAAAAqA9VbAAAAB3RJTUUH1QcYESAu%2FRxkdgAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAADVSURBVHja7djLCYBAEETBXdFMjML82SjMRPATgg3CIFTB3ObQ59caAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAH%2BnNX9QgAAAAAyvW3j%2FN5jL16LQAAAAB1pmVbo%2F%2FqwQAAAAD8i6AEAAAAQERQAgAAACAiKAEAAAAQEZQAAAAAiAhKAAAAAEQEJQAAAAAighIAAAAAEUEJAAAAgIigBAAAAEBEUAIAAAAgIigBAAAAELkBs3IFHlZehDIAAAAASUVORK5CYII%3D") no-repeat 100% 0;}
#mpoptop div {background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAcCAYAAACUJBTQAAAAB3RJTUUH1QcYEggBCdZJ3AAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAA1SURBVHjaY2AYBaNgFIyCUYAVMJKg9j%2B5lrCQovjf72N3yLGEiUohMmrJqCWjloxaMuwsAQBsXQS6Uou6UwAAAABJRU5ErkJggg%3D%3D") no-repeat 0 0;}
#mpopbot {background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABIQAAAAbCAYAAAANrVSzAAAAB3RJTUUH1QcYEScqtTA2qAAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAFlSURBVHja7d1BasJAFAbgKAq9QS%2FgKTySB%2B0lunJjty2UFoyd9A3VElKiYMChzvfBzwwhi7f%2BeSGz1D49NwAAAAD8W%2FPlehXHJrKLbCMvkbfIPpL%2BvF96YAAAAABuSyEEAAAAUBmFEAAAAEBlFEIAAAAAlVEIAQAAAFRGIQQAAABQGYUQAAAAQGUUQgAAAACVUQgBAAAA3IducO8Gz34phAAAAADuw9kSqG8xX65XpacFAAAAYLI2coik5kIptIhsSk8LAAAAwFVOG0G5DHqPfEb2ka%2FmTCmUC6Fd6ckBAAAAuFoufvJmUC6DXo%2FnoblQCG1LTw0AAADAJHkjKG8JfTQ%2Fm0L5nsZenkUeS08MAAAAwCTpmLaX0c%2FGciH0UHpiAAAAACY5FT%2Bpl9FPxnIh5NfzAAAAAPehG5wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3NI3bX86NTP%2FgNgAAAAASUVORK5CYII%3D") no-repeat 100% 100%;}
#mpopbot div {background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAaCAYAAABCfffNAAAAB3RJTUUH1QcYEgYpouDMqAAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAACDSURBVHjaY2QgHvz%2F9%2FvYHRLUwwETOZpGLRm1ZNQS6gNGEtT%2Bp4clyHpYgZgHiEWBWApK80DFGdHNZSHTcSBf%2FQHi70D8ASr2BWoehsPJteQfEP%2BGGswAtQzkC2ZqBRdMHzPUYBhmYsCRkMi1BKaXiQHVcEZcCikBjGj0KBgFo2AwAwAPWA8LTIjQFgAAAABJRU5ErkJggg%3D%3D") no-repeat 0 100%;}
#mpopbod {background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAABwCAYAAADBoipeAAAAB3RJTUUH1QcYEg8LpkI2BQAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAA9SURBVHja7cuxCQAgEATBw%2F6bMrEpQT8VTDSfDRcmeW%2BvOfo52ge%2BgmEYhmEYhmEYhmEYhmEYhmEYhuGkAOPQBV6tOIIuAAAAAElFTkSuQmCC") repeat-y 0 0;}
#mpopbod>div {background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAACWCAYAAADqiGnCAAAAB3RJTUUH1QcYEhIvZS2%2ByAAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAACESURBVHja7dE7CoAwEEXRiV8EWwv3v0ELsZLEESaQJiaxvsJFBQ9PUUQkSMPRtTz8HoOdZ80nZVfjwqot2qT1mistbNqlnXYfcksR7Nph17flSwuSrGRfqfkbIhhtrft6OAUuSWqB1ODmPw0AAAAAAAAAAAAAAAAAAAAAAAAAAAAA%2FAMPc0oRfbciy6wAAAAASUVORK5CYII%3D") repeat-y 100% 0;}
#mpopbod>div>div {background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAAB3RJTUUH1QcYEDIBL%2FtDywAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAMjSURBVHja7dRBDcAgAMDAMf%2B6MIEUEoIMHr1T0FfH2XN9QNL%2FOgB4xwAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAgzAAg7AKm7QWaHU%2FaiAAAAABJRU5ErkJggg%3D%3D") repeat;}
btw. hesido, there are some problems with data: URIs while using this script. Multipopup kicks in and everything dissapears on such site. Try generating image with data:uri kitchen. Resulting image will not be visible.
yellowbox.png
Originally posted by hesido It seems to work OK with me with the version I have without hacks.
Maybe we won't need the hack.. I'll post the new version in an hour or so..
Hmm, maybe it's some other script which is conflicting. I need to figure it out on clean install.
You are using external CSS, I believe, with the if (document.getElementsByTagName("head").length && mPUserJS.useDefStyle) ??
Actually with "if (mPUserJS.useDefStyle && document.getElementsByTagName("head").length)", but yes, I do
25. July 2005, 03:26:01 (edited)
1.6 revision 11 - with multiple attribute support
OK, new version, I hope this fixes the uri kitchen problem DIZ had. I've decided that the script should terminate if the document has no head tag, html files without head tag should live without our multipopup, but this does save us a lot of trouble for lots of data types, and also solves problems with dynamically generated window popups where the popup script is fired too early and may temper with proper rendering of the page.The script now comes with multiple attribute support but this is experimental at this stage. You can see it in the demo page but it is turned off by default in the archive. You can read the page for further info, about nested element problems. The presets are for title, alt, href and src, while you can add presets for more.
Filbo and Shoust, I hope you are reading this, I have gotten into a lot of trouble now with this multiple attribute support
(It is quite useful even at this stage, you may want to try it.)I am now bundling the CSS for those who like to use the external styles. E.G. D.I.Z. eheh..
Version 1.7
I got the multiple attribute support done, it is no longer experimental, it is fully working
The script in the archive tho defaults to display 'title's only. For those of you who like investigative reporting, you can turn on all those attributes, or add new custom attributes to look for.See it working at:
http://www.hesido.com/test/webdesign/multipopupdemopage.htm
If we don't find an important bug, I will now take some time off this javascript, even tho ability to turn on / off features of the script on the fly using key combos sound tempting, I'll leave it to much much later.
Now my suggestions:
Play with the delay, that's one of the best capabilities of the script, you can set the first popup delay, and instant-popup duration which are all important for accessibility. For instance, you can increase the delay to 2-3 seconds even, and have a high nodelay period accordingly, as once you get in the title looking mood, it should be faster to popup, but you don't want them to popup unless you focus on an element for a good 2 seconds.. The default is 650 miliseconds, but it makes sense if you keep it over 1 seconds, maybe in my next release, my default will be 1.5 seconds with 1 seconds nodelay period. Hmmm..
Turn off animations, I'm tired of it myself, even though 80% of development time was done to perfect animations and the code would be 60% shorter if it wasn't for the animation routines

You can try DIZ's nice classic yellow box, it is really nice.
Force Opera to fix the Iframes problems!
Produce your own styles and share them with others, this thread is suitable for the job.
Pray for this to be a bug-free version.
Still don't have time to play with settings.
Everyone has a right to be stupid, but some just abuse the privilege.
1.8 Version, with primary and secondary displays
OK, I couldn't keep myself do that final change which will make this useful for anybody on the planet, be it some curious guy examining the alt / src / hrf attributes, or the casual surfer who wants to style his own popups, or simply decide the delay of the popups, to begin with.The user now can press alt, ctrl, or shift keys during before hovering elements, and the behaviour will change:
alt key: display secondary info (alt, href, src)
ctrl key: nodelay popups.
shift key: temporarily disable popups, for whatever reason you may want it.
This I believe is one of the most important updates that increases useability of the script, now, it is not only the ability to customize delays and the hopefully good look, but the feature set without bloating the ordinary use of the script.
Of course, what you see in primary or secondary displays are fully customizable. You may want to view the alt attribute in primary, e.g. while you may add viewing of "style" attribute to secondary display..
For other changes, please visit
http://www.hesido.com/test/webdesign/multipopupdemopage.htm



Time to submit to userjs.org!!
Everyone has a right to be stupid, but some just abuse the privilege.
Tyanah:
Either find mPUserJS.attDPri then make it:
mPUserJS.attDPri = [true,false,true,false]; to see hrefs in primary,
or press the alt key to view it in the secondary popup.. It should work then, let me know if you still have problems.
Thomas: You want it becase you keep on pressing the middle mouse button for javascript links and realize there is no page open? Happens here too.
I'll see what I can do about it...I prefer to have it on the primary but now i understand how to add or not an attribute on primary/secondary.
Another question, i must wait until pages are completely loaded to use the multipopup and i haven't a very fast connexion.
Is there any way to enable it everytime even if the page isn't fully loaded ?
second is that it prevents the popup menu on http://codeguru.earthweb.com/ navigation menu.
also i've noticed that there is no popup of address field on my.opera.com dropdown menu.

Tyanah, theres not much chance of doing that with the current DOM specs, waiting for images to load is indeed awful. That's why I have my status bar open. (there should be a domtree loaded event, I am not sure there is such a thing, but it desperately needed) One method could be reassesing loaded parts of the document once every 5-10 seconds and then doing one final pass when the document is ready. But it is overkill, I believe.
Tracio: Thanks
(but you see it has some issues that needs to be tackled
)Currently reading the DOM event specs at w3. Trying to find a way out.. Keep your fingers crossed. I may check for bubbling manually.
This teaches me a good lesson. Thanks trevg.
You can switch support for multiple attributes on without creating problems with webpages, but nested information may not show as expected. I may *remove* support for multiple elements if I don't come up with a graceful solution.
The support for multiple tags might just have burst worse than the .net bubble. I want to get

(I'll fix the problem when I am sober :=) )
1.8 revision 4 - Problem fixed, what a relief for me.
Ok the problem is solved.the event.propogation method is evil for a userJS . I read the specs at W3, and found the answer: I just check for event.target, and return early if necessary. Simple.. (I thought it might be the end of it all
, but the documentations helped, I am so lucky )Trevg, the problem with that site (and a potential quarter million other sites
) is solved, is the problem with myopera enhancement solved too?
p.s. DIZ, check out the toggle CSS toy at the page, I put your styles in there

/* do not mess with the rest */ , the last settings will be active. Just copy the modified lines of preferences and paste it there ,they should be active.
There is no way to do variable opacity in Opera. I am waiting for it too. Opera has all it needs to allow variable opacity, I guess they'll put it in sooner or later.
but - i've noticed that the tooltip appears behind certain page elements (best way to describe it), for example: http://www.meyerweb.com/eric/css/edge/popups/demo.html menu on the left the tooltip is obscured.
also I browse with status bar off and the popup menus I have come across don't display a js tooltip for the address of a menu item, while opera does. it's something I've got used to in opera.
26. July 2005, 14:10:40 (edited)

Trevg: We need to increase the z-index to insane levels then. till then, you can find the internal styling and do a temp fix. To view addresses, plase press the alt button before hovering, or stitch address viewing to primary view like I told earlier. edit: "I might not have understood you correctly on what menu item is, tho." Should I make the address viewing default??? Everybody seems to like it

Originally posted by hesido
Should I make the address viewing default??? Everybody seems to like it![]()
-1.
That´s the (main) reason why I use the script. I don´t like address tooltips showing up all the time; I want to "control" them. The current implementation seems OK to me and I think it should remain as default.
Anyway, you could make two versions but that could be confusing, I´m afraid...
Re: 1.8 revision 4 - Problem fixed, what a relief for me.
Originally posted by hesido
Ok the problem is solved.
I've noticed it too on http://www.videolan.org/. Background of buttons didn't changed while hovering them. I underestimated it and didn't bothered reporting. I'm glad you've fixed it though as it was really serious bug.

Originally posted by Tracio
-1.![]()
I don´t like address tooltips showing up all the time; I want to "control" them.
Me too. I turned off original tooltips just because I wanted to hide this href addresses while still being able to view 'title' in tooltip.
There is one small bug with displaying text (especially hrefs) in tooltips. If there is some long unbreakable word, it will not be fully visible (some part will be hidden). I guess this is a limitation of html/css and might not be possible to fix (without hacks, like insterting space every n'th character). It does not really bothers me though. Hesido, I don't think you should spend any of your precious time fixing it

p.s. DIZ, check out the toggle CSS toy at the page, I put your styles in there
Cool, thanks
Originally posted by trevg
i've noticed that the tooltip appears behind certain page elements (best way to describe it), for example: http://www.meyerweb.com/eric/css/edge/popups/demo.html menu on the left the tooltip is obscured.
it also happen for ogame.pl or ogame.org :/
1.8 revision 5, separate preferences file and z-index bug fix.
@trevg & mleko : The z-index was not being set,
Problem fixed.@d.i.z & tracio : Ok

But.... Now you can have separate preferences file! Yay

No more having to re-edit your preferences with every update!
The script works also without external preferences, but if you have the prefs file in your userjs dir, it will have precedence. But this came a bit too late

http://www.hesido.com/test/webdesign/multipopupdemopage.htm
p.s. DIZ, I am aware of long anchors being clipped, but it is not a prority to fix
I need to set it up a nice regex as putting a space on every Nth char may break nicely formed anchors that usually wrap without problems 
p.p.s. I will be working on that display different on pattern match sometime later (display javascript links with different style.) I haven't forgotten about it

>Bela<

I do however have a solution in mind, which will make the code a little longer if not slower.. (My code is long, but it is not slow at least
but sometime I see such clean coding I ashamed.. The non animated version would be much smaller, and the non configurable one also, so I should not feel that bad
)..Keep your fingers crossed.
I now think of simply dividing the writing and clearing functions from mousein and mouseout receiving functions, and then be able to fire the first two at will.
BTW, The reason I use two boxes (one for actual display data, one for calcuting the box size which is hidden, is that the box sizing greatly differs at the edge of screen if the width is set to auto, with the tooltip getting narrower and narrower on each popup display on the edge before tooltip is hidden. (the fixed width version of multipopup had no such problems, and I calculated the popup size from the displayed div.)
Edit: The alt key press is not captured when attached to window.. but control and shift key is. So I think of reading that in moveDiv function which is fired after a mouse move, but than users would have to slightly move the pointer for that to get effect. That or I could use ctrl for the alternate view, and alt for instant popup. Which would you like?
27. July 2005, 22:02:35 (edited)
1.9 beta2 : Live switching of primary and secondary views
How it could have been easier, if didn't have animations. As animations are asynchronous, they have to respond to asynchronous changes correctly. That's why adding new features is PITA.I managed to put in live switching of primary and secondary views.
Because of my codepath, putting live switching if popup was already visible was easy as pie. The hard part which took all the time again due the the codepath,surprisingly, was making a popup appear if the element had nothing to popup in primary, without having to move the pointer slightly. Strange times we live in :=) (I just want you to be more comfortable, and it took all the time! I could have asked you to slightly move the pointer to activate secondary popup view when nopopup was in view! )
An important behaviour change:
Secondary view is now activated by CTRL, and ALT is used for instant popping up. This was mandatory for live switching, as Opera cannot capture alt-keydown event just by itself.
Grab the script at:
http://www.hesido.com/test/webdesign/multipopupdemopage.htm
the preferences file is backwards compatible, no need to write over your customizations

1.9 beta3 Online, hotfix for the nasty focus bug.
BTW, revpeter, diz, thanks
edit: It does solve the problem... Sorry about this.
edit2: The fix is online, you do NOT have to change your preferences. That function is removed. (a.k.a busted).
Downside is that, Opera may miss some keypresses if the window goes out of focus for some reason.
Mleko, thanks for reporting this. I am

29. July 2005, 14:45:56 (edited)
1.9 Beta 5 - New features added
Hi all,With this update, there is no currently known bugs, and no feature-requests left out.
Regex pattern matching can be used to style the text differently:
Defaults to hrefs starting javascript, the attribute name is displayed in red.
Force breaking of long href's:
Defaults to be used only for edit: *href* and source. Now you can see the contents of long href's and src's no matter the length. Forced broken lines are denoted with a red sign.
http://www.hesido.com/test/webdesign/multipopupdemopage.htm
And of course, you can customize every little detail.
Showing topic replies 1 - 50 of 436.