tag:blogger.com,1999:blog-3474748080814775582.post3140601492909672447..comments2021-04-20T11:20:48.148-05:00Comments on Javascript, jQuery and other Junk: Tooltips - Jatt (Just another tooltip)Rob Garrisonhttp://www.blogger.com/profile/03268017297500430302noreply@blogger.comBlogger12125tag:blogger.com,1999:blog-3474748080814775582.post-72380751529289001022011-08-20T07:24:58.111-05:002011-08-20T07:24:58.111-05:00Hi Sean!
I'm glad you are finding this useful...Hi Sean!<br /><br />I'm glad you are finding this useful :)<br /><br />1) If you want to change the design of the tooltip, did you try changing the metadata? It's a bit of extra work to add the meta-data to each tooltip but you can see how to use it in <a href="http://mottie.github.com/Jatt/meta.html" rel="nofollow">this demo</a>.<br /><br />Maybe a better/easier solution would be to use the "local" option. What that does is attach the tooltip next to the element with the tooltip. It may not work so well if you have a lot of relative/absolutely positioned elements on the page, but it's been so long since I wrote this I don't remember off the top of my head if I tried to compensate for this. Anyway, when you set local to "true", you can then style the tooltip based on the element's wrapper. Given this HTML:<br /><br /><div class="block1"><br /> <a class="tooltip" title="Download it!" href="download.html">Download</a><br /></div><br /><div class="block2"><br /> <a class="tooltip" title="Read the docs" href="docs.html">Documentation</a><br /></div><br /><br />This css will change the tooltip design (well just color in this example) for each tooltip block:<br /><br />.block1 #tooltip { background-color: blue; }<br />.block2 #tooltip { background-color: red; }<br /><br />Use the option in the initialization code as follows:<br /><br />$.jatt({<br /> local : true<br />});<br /><br />2) To lenghten the time of the tooltip fadeIn, try increasing the speed option time. The value is set in milliseconds. Initialize the code with the following option (separate options using commas, but make sure there isn't a comma after the last option or IE will break):<br /><br />$.jatt({<br /> local : true,<br /> speed : 300<br />});<br /><br />If the tooltip still isn't fading in as you want, then using a different easing function, like "<a href="http://jquery-ui.googlecode.com/svn/trunk/demos/effect/easing.html" rel="nofollow">easeInSine</a>" might work better... but ummm, I guess I need to add an easing option LOL... I'll do that today ;)<br /><br />3) I can't tell what the problem might be with the two elements, but maybe try setting the "followMouse" option to "false" to align the tooltip around the element instead of based on the cursor position.<br /><br />$.jatt({<br /> local : true,<br /> speed : 300,<br /> followMouse : false<br />});<br /><br />Or use the meta-data to change the xOffset value:<br /><br /><a href="#" class="tooltip { xOffset: 10; }" title="tooltip content">Link</a><br /><br />If you have any further questions, please feel free to email me on my gmail account, the user name is wowmotty :)Rob Garrisonhttps://www.blogger.com/profile/03268017297500430302noreply@blogger.comtag:blogger.com,1999:blog-3474748080814775582.post-14412039014377446822011-08-20T02:54:10.677-05:002011-08-20T02:54:10.677-05:00Hi Mottie,
I have enjoyed working with jatt, it&#...Hi Mottie,<br /><br />I have enjoyed working with jatt, it's a great tooltip. Thank you for sharing.<br /><br />I have run into a few issues that I was hoping you could help me with.<br /><br />1.) How can I use the same class '.tooltip', to call several different ID's 'tooltip, tooltip2, tooltip3, etc'? I need the different ID's for various different design elements. What would the script look like?<br /><br />2.) Is it possible to have a delay while hovering before the tooltip shows? Say, 0.5 seconds?<br /><br />3.) I have two elements that are side by side, and one of them randomly shows about 10px left of its normal xOffset. Without posting code I was just wondering if you might have an idea what was causing this.<br /><br />Thank you,<br /><br />Seannew2designhttps://www.blogger.com/profile/05029501772097402496noreply@blogger.comtag:blogger.com,1999:blog-3474748080814775582.post-4113656927677889812011-03-02T22:26:17.146-06:002011-03-02T22:26:17.146-06:00Hi,
I'm posting this here in case you don'...Hi,<br /><br />I'm posting this here in case you don't get to your e-mail account too often. It appears you read these posts regularly...<br /><br />I just this morning found your "New and Improved JQuery Tooltips" and installed the script on one of my antique radio web sites on this page (http://beta.radioattic.com/radios.htm. It's a great improvement over Alen Grakalic's tooltips in that the tooltips don't wander off the visible browser window. And on this particular page, with over 1,100 links, it isn't cumbersome like the Dynamic Drive tooltips.<br /><br />One of my visitors pointed out a problem which I'll repeat here:<br /><br />My machine runs XP Pro (SP3) and IE 7 on a high-speed DSL connection. When I access the Radios for Sale page on that machine, I get an IE error prompt: "Stop Running this script? A Script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive. Yes/No".<br /> <br />If I let the script run, the page reloads, and I get the message again. If I let the script run yet again, the page reloads and the feature works properly, although the thumbnails load a little sluggishly--not terribly slowly, but there is a slight delay upon mouseover.<br /><br />I had tested the script on IE8 and FF3.6 with no problems. But when I switched IE8 into Compatibility Mode, I got the same error that my visitor reported.<br /><br />I have upgraded to the most current version of Jquery (the "screenshot" would not work correctly until I did), so I should be running exactly what your script is using. I wonder if you had noticed this in your testing, and if perhaps your new & improved Jatt script may work better with the older browser.<br /><br />Thanks for a great script! I put it back on my beta site for now. <br /><br />I'm trying to test your improved script but haven't gotten it to work yet.Anonymoushttps://www.blogger.com/profile/03005395195429874054noreply@blogger.comtag:blogger.com,1999:blog-3474748080814775582.post-21483685016977051392010-11-07T23:44:29.988-06:002010-11-07T23:44:29.988-06:00Problem solved! :PProblem solved! :PRob Garrisonhttps://www.blogger.com/profile/03268017297500430302noreply@blogger.comtag:blogger.com,1999:blog-3474748080814775582.post-81394201091512320612010-11-07T18:24:00.981-06:002010-11-07T18:24:00.981-06:00Hi Eno!
Hmmm, yeah odd... it isn't something ...Hi Eno!<br /><br />Hmmm, yeah odd... it isn't something blatantly obvious so I'll have to delve into the problem tomorrow. I'll post here when I fix it, but it'd be easier next time if you just e-mailed me at wowmotty at gmail dot com - it's just easier to have a conversation :PRob Garrisonhttps://www.blogger.com/profile/03268017297500430302noreply@blogger.comtag:blogger.com,1999:blog-3474748080814775582.post-26146896314294994222010-11-07T17:38:36.662-06:002010-11-07T17:38:36.662-06:00Hey Mottie,
long time since we last spoke. I rece...Hey Mottie,<br /><br />long time since we last spoke. I recently came around to using it in a live project and tested it in IE7. It gives me a 'opt.followMouse is null or not an object'. Since I am a complete JS noobie I wonder if you could help me out on this since it seems to come from your script (here on this page as well, the error)? Thanks again for your massive help ;).<br /><br />Best<br /><br />EnoEnohttps://www.blogger.com/profile/11619972256500658157noreply@blogger.comtag:blogger.com,1999:blog-3474748080814775582.post-17976710402598266652010-08-28T06:45:59.666-05:002010-08-28T06:45:59.666-05:00Hey Mottie,
I was quite happy with your script, t...Hey Mottie,<br /><br />I was quite happy with your script, though it would need some testing on different screen resolutions/browsers etc. for me to be 100% sure. <br /><br />I barely had seen any flickering yet, only on text links that were too short (1-2 characters) which is quite self-explanatory. Will check with my current version and see whether I need updating to your latest version (which will include some customisation on my end again ;)).<br /><br />As for your question as regards to caching external content - once I reload the page the new content will be loaded again, right, so that I have the updated content in my tooltips? If so, I wouldn't bother for an option to have content refresh.<br /><br />All the best<br /><br />EnoEnohttps://www.blogger.com/profile/11619972256500658157noreply@blogger.comtag:blogger.com,1999:blog-3474748080814775582.post-11964616426470575852010-08-27T09:27:32.661-05:002010-08-27T09:27:32.661-05:00Hi Eno!
Ok next update... I fixed the tooltip fli...Hi Eno!<br /><br />Ok next update... I fixed the tooltip flicker problem if the mouse ended up inside the tooltip. Also, I had to separate out the tooltip, screenshot & preview classes & IDs. Previously, if you changed the tooltip class, it would change the tooltip ID as well. <br /><br />This update will break what you already set up, but all you should have to do different is add a period to the tooltip option -> from 'tooptip' to '.tooltip'. I did this because the tooltip ID won't change with different targets like "#main a" - which I think would actually break the tooltip.Rob Garrisonhttps://www.blogger.com/profile/03268017297500430302noreply@blogger.comtag:blogger.com,1999:blog-3474748080814775582.post-36562222915710392202010-08-27T06:23:10.760-05:002010-08-27T06:23:10.760-05:00Hi Eno!
Glad to hear you have it all working! Yea...Hi Eno!<br /><br />Glad to hear you have it all working! Yeah I know this comment system isn't ideal, so if you have anymore questions, just go ahead and email me at wowmotty at gmail.<br /><br />I did have one question for you. The script saves the contents that is loaded from the external pages. So if that content, say a feed, changes the tooltip may not reflect that... I guess I could change that to always load, but I wasn't sure if it was needed. Hmmm, maybe I'll add it as an option.Rob Garrisonhttps://www.blogger.com/profile/03268017297500430302noreply@blogger.comtag:blogger.com,1999:blog-3474748080814775582.post-42380576103468257132010-08-27T04:29:49.262-05:002010-08-27T04:29:49.262-05:00The comment system is a little fishy. I tried to i...The comment system is a little fishy. I tried to insert code, but it didn't allow for it, so I tried to change it a bit - the anchor-tags still got translated into code, but I hope you are able to detect what I mean :).Enohttps://www.blogger.com/profile/17843900233104856974noreply@blogger.comtag:blogger.com,1999:blog-3474748080814775582.post-17006632013294312682010-08-27T04:28:22.502-05:002010-08-27T04:28:22.502-05:00Hey Mottie,
first of all, thanks again for your k...Hey Mottie,<br /><br />first of all, thanks again for your kind support and your awesome script. I got it all running now as I need it.<br /><br />1. Worked flawlessly. ;)<br />2./4. I'll give you a rough overview. In certain pages of a project, when you hover over some text links, a "tooltip" should pop up and give you more information the linked text. Also, when hovering over thumbnails in another div, these thumbnails should show the original-sized pic on hover. Like this:<br /><br />[div id="main"><br />[p>Bla bla bla bla <a href="insight.htm" rel="nofollow">Textlink</a>[/p><br />[/div><br />[div id="sidebar"><br /><a href="supersizeimage1.jpg" rel="nofollow">[img src="..." /></a><br />[/div><br /><br />I wanted your script to react on every anchor element that appears within the #main div (for the tooltip thingy) and every link in the #sidebar div (for image preview). With some modifications, I got it to work - though I exchanged the IDs for classes, i.e. [div class="main"> and [div class="sidebar">. <br /><br />3. Working ;).<br /><br />5. I'll take a look into it, thanks :).Enohttps://www.blogger.com/profile/17843900233104856974noreply@blogger.comtag:blogger.com,1999:blog-3474748080814775582.post-46790205215778608562010-08-27T00:02:20.409-05:002010-08-27T00:02:20.409-05:00Hi Eno!
I had to modify the external page loading...Hi Eno!<br /><br />I had to modify the external page loading script slightly, so it should be working now. You'll have to download the latest copy of the script from <a href="http://github.com/Mottie/Jatt" rel="nofollow">github</a>. Now to address your other questions/comments:<br /><br />1. Putting the script and the call into one file should work just fine, but make sure you add the $(document).ready(function(){...}) to the bottom of the file.<br /><br />2. I'm not quite sure what you are trying to do with your external pages. At this time only the tooltip and not the preview or screenshot parts of the script allow you to add selectors after the url. Also you can only have one ID per page, so I'm not understanding what you mean by "I want all links to external pages in a certain div named e.g. #main (with an ID) to open up in your shiny new tooltip thingy". Maybe if you showed me some code?<br /><br />3. In the Jatt code, I commented about class & ID in that the tooltip option - tooltip: 'tooltip', - means that the script will look for all ".tooltip" classes and present the contents of the title attribute (by default) in a div with id "tooltip". So, if you changed the option to main - tooltip: 'main', - then the script will look for the class ".main" and activate the tooltip script on it and show the results in a div with id "main". But the script adds this div with that ID, so it won't put the tooltips into a different div on the page.<br /><br />4. Linked images in another div... I'm not quite sure what you mean here either. Some example code would help.<br /><br />5. The line below actually does have a bug (which I fixed), but it clears the title attribute to prevent the default browser tooltip from appearing. We don't want it because you can't add any styling to it.<br /><br /> if (opt.content == 'title') { obj.attr(opt.content, ''); }Rob Garrisonhttps://www.blogger.com/profile/03268017297500430302noreply@blogger.com