tag:blogger.com,1999:blog-1633952630215425486.post2344118789640645547..comments2023-10-11T00:15:54.331-07:00Comments on Infinite Gyre: Simple Inline TooltipsNickolashttp://www.blogger.com/profile/15971114482213270010noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-1633952630215425486.post-65686881594717451552015-04-14T16:18:30.169-07:002015-04-14T16:18:30.169-07:00Thanks a lot for the explanation!
I'm no prog...Thanks a lot for the explanation!<br /><br />I'm no programmer so I probably won't be able to change the code to use onclick event handlers, but I'll use the code as it is since I only mentioned the onclick behavior and the sliders because I was exploring those options in my mind. :) However, it's nice to know that it's <em>indeed</em> possible [for a person who knows how to code in JavaScript] to modify the code to achieve those effects.<br /><br />Cheers! :)ve4ernikhttps://www.blogger.com/profile/17552849334148666591noreply@blogger.comtag:blogger.com,1999:blog-1633952630215425486.post-86967802355558733062015-04-14T15:28:21.466-07:002015-04-14T15:28:21.466-07:00Yeah, that's what I thought you were talking a...Yeah, that's what I thought you were talking about in Firefox. In Chrome, mousing over the default right-click context menu does not have that problem. You can right-click and select "Copy" successfully in Chrome.<br /><br />You can put anything you want inside the tooltips as long as the content isn't picky about its exact location in the DOM tree. Almost nothing is, just be aware that the initialization script un-nests all of the tooltip popups.<br /><br />You should be able to change the behavior of this script to match the behavior of the tooltips on the page you linked without much difficulty. Instead of binding mouseenter and mouseleave event handlers as this script does, you want to bind onclick event handlers.<br /><br />Each tooltip trigger will have an onclick event handler to show that particular tooltip's popup, and then the entire document will have an event handler to hide all the tooltip popups when you click anywhere else in the document. You can see an example of coding that behavior here: <a href="http://stackoverflow.com/questions/7566228/jquery-hide-if-clicked-outside-the-button" rel="nofollow">http://stackoverflow.com/questions/7566228/jquery-hide-if-clicked-outside-the-button</a>Nickolashttps://www.blogger.com/profile/15971114482213270010noreply@blogger.comtag:blogger.com,1999:blog-1633952630215425486.post-21952134081202608022015-04-14T06:14:20.177-07:002015-04-14T06:14:20.177-07:00Thanks a lot for your explanation!
"In Chrom...Thanks a lot for your explanation!<br /><br /><em>"In Chrome, moving the mouse cursor "outside" of a tooltip via a right-click menu doesn't trigger mouseout or mouseleave until the menu itself vanishes, which does allow you to, say, copy a link or text via right clicking. If you or your users have the option of using Chrome, that's one way around the problem."</em><br /><br />I'm not a native English user so I may have misunderstood that part. Here's a GIF that shows what I meant (I made it using a freeware program called GifCam): <a href="http://imgur.com/kA3LtYL" rel="nofollow">http://imgur.com/kA3LtYL</a> (sorry about some of the UI text not being in English (that's Bulgarian by the way, if you're curious)).<br /><br />I'll consider reporting this to the Firefox Bugzilla bug tracker.<br /><br />Thanks for the clarification about the version of jQuery that's recommended for use with this code.<br /><br />Here are 2 more questions about your wonderful code:<br /><br />1. Can I put any HTML element inside the tooltips (not just text and hyperlinks), e.g. img, , etc.?<br /><br />2. On a side note, please have a look at the blue tooltip next to "← open these" on the following page: <a href="http://waitbutwhy.com/2015/01/artificial-intelligence-revolution-1.html" rel="nofollow">http://waitbutwhy.com/2015/01/artificial-intelligence-revolution-1.html</a> (though those tooltips there behave in a different way — they appear on mouse click and disappear when you click somewhere on the page (that isn't the tooltip itself)). Is it possible to put sliders like that in your tooltips (i.e. for sliders to appear when the content of the tooltip exceeds certain limits) or make the tooltips behave in a similar way (mouseclick = appears, etc. like I already mentioned...)?<br /><br />Even if it may not be possible, I still find your code pretty awesome and I'm going to use it if you don't mind. :)ve4ernikhttps://www.blogger.com/profile/17552849334148666591noreply@blogger.comtag:blogger.com,1999:blog-1633952630215425486.post-43080617941589821322015-04-13T17:09:53.704-07:002015-04-13T17:09:53.704-07:00Unfortunately, there's no easy way to change t...Unfortunately, there's no easy way to change the behavior you're seeing, as the default right click context menus aren't part of the webpage at all. Those menus are determined and controlled by your browser.<br /><br />In Chrome, moving the mouse cursor "outside" of a tooltip via a right-click menu doesn't trigger mouseout or mouseleave until the menu itself vanishes, which does allow you to, say, copy a link or text via right clicking. If you or your users have the option of using Chrome, that's one way around the problem.<br /><br />Firefox, on the other hand, <i>does</i> process mouseout and mouseleave events when you're mousing over a non-webpage context menu, which just really sucks. You might report this as a bug to the Firefox developers and cross your fingers.<br /><br />You <i>can</i> supersede the browser's default context menu by adding a 'contextmenu' eventlistener, which will allow you to display HTML content instead of a default context menu, but that's really outside the scope of this simple tooltip script.<br /><br />The version of jQuery shouldn't matter as long as the jQuery team hasn't made drastic non-backwards-compatible changes to their library. (I assume they haven't.) v1.11.0 was simply the latest stable release at the time I wrote this tooltip script.Nickolashttps://www.blogger.com/profile/15971114482213270010noreply@blogger.comtag:blogger.com,1999:blog-1633952630215425486.post-61192261112760661572015-04-13T12:45:49.481-07:002015-04-13T12:45:49.481-07:00That's awesome!
There's one problem thoug...That's awesome!<br /><br />There's one problem though. Since the tooltips disappears when you move the mouse cursor out of the tooltop rectangle, right mouse click + Copy doesn't seem to copy anything. I'm using Mozilla Firefox v32.0.<br /><br />However, Ctrl + C works, but only when used with an active selection of the text inside the tooltip and when the cursor hasn't moved away from the tooltip.<br /><br />Is jquery-1.11.0.min.js the recommended version of jQuery to use with this code or is the latest stable version of jQuery (1.11.2) also an option?ve4ernikhttps://www.blogger.com/profile/17552849334148666591noreply@blogger.com