webspider25 Posted September 12, 2007 Share Posted September 12, 2007 Hi all,I wanted to add the tool tip in my web page but i dont know how to do that.i want to add the tip tool on my links.....eg<a href="#">Home</a>(When the user put his cursor on the Home the tool tip shuld appear and display the description abut the "Home page")So any one out there help me ....Waiting for repliesBye Link to comment Share on other sites More sharing options...
Err Posted September 12, 2007 Share Posted September 12, 2007 <a title="The tool tip you want here" href="">Home</a> Link to comment Share on other sites More sharing options...
webspider25 Posted September 12, 2007 Author Share Posted September 12, 2007 Hi Rx,Its Working as i wanted but noe i want sum thing more into it.I want my tool tip to be very decorative.......Hw cn i change the background-color,border-color etc in the tol tip???Help me once again.Waiting for replybye <a title="The tool tip you want here" href="">Home</a> Link to comment Share on other sites More sharing options...
jlhaslip Posted September 12, 2007 Share Posted September 12, 2007 http://jlhaslip.trap17.com/samples/tooltips/index.htmlTry that link Link to comment Share on other sites More sharing options...
justsomeguy Posted September 12, 2007 Share Posted September 12, 2007 Some of the things on that page don't work in Opera, like the image tooltip and the text counter. And some of the tooltips that hover over block elements are getting cut off.I've used Walter Zorn's tooltip library before, it works very well and has quite a few features like fading, speech bubbles, etc. It looks like he's put quite a bit of effort into keeping it up to date.http://www.walterzorn.com/tooltip/tooltip_e.htm Link to comment Share on other sites More sharing options...
jlhaslip Posted September 12, 2007 Share Posted September 12, 2007 Any idea what needs to be fixed in that, justsomeguy?Opera must've changed something, because it worked once-upon-a-time in Opera 8.? (I think) Link to comment Share on other sites More sharing options...
justsomeguy Posted September 12, 2007 Share Posted September 12, 2007 It looks like a z-index issue, there's no z-index on this class:a.info:hover spanAlso, you can replace something like this:<a href="#"with this:<a href="java script:void(0);"and the page won't jump when you click the link, it won't do anything. Link to comment Share on other sites More sharing options...
jlhaslip Posted September 13, 2007 Share Posted September 13, 2007 Thanks for the pointers.I will check those ideas out and I'll let you know how it turns out. Link to comment Share on other sites More sharing options...
jlhaslip Posted September 16, 2007 Share Posted September 16, 2007 Apparently. Opera is unsolvable. Cssplay can't get it right either... Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted September 17, 2007 Share Posted September 17, 2007 Wow that is quite interesting as I didn't know how to do that before. May I have your permission to include that in my website as a code snippet? It will be licensed under a Creative Commons BY-NC-ND license.Oh and your page has 2 XHTML errors in it, forgetting the </p> and omitting the alt attribute. Link to comment Share on other sites More sharing options...
jlhaslip Posted September 17, 2007 Share Posted September 17, 2007 Sure thing, FFRocks. and I think I fixed those earlier while I was rattling around in there. I added a z-index, like justsomeguy suggested, and reviewed cssplay, too, but it simply doesn't work in a current Opear browser. Seems to me I played with opera once upon a time and had it working, but it was quite a while ago. Opera 7, if i recall.And Zorn javascript code is excellent, indeed, but it is javascript... I always prefer to work in CSS if possible.Checking your posting time, it may have been after you saw the page...*edit*Thanks, folks...Updated, changes the anchors and placed a note about Opera.http://www.jlhaslip.trap17.com/samples/tooltips/index.html Link to comment Share on other sites More sharing options...
webspider25 Posted September 20, 2007 Author Share Posted September 20, 2007 Hi all,Thanks for ur replies..............Cant we add the tooltip(advanced) by the css only???As i am in the learning phase of javascript and the javscript-long-coding makes me sick.............So any one can tell me how to add the tooltip not single line multiple lines than plsthanksbye Sure thing, FFRocks. and I think I fixed those earlier while I was rattling around in there. I added a z-index, like justsomeguy suggested, and reviewed cssplay, too, but it simply doesn't work in a current Opear browser. Seems to me I played with opera once upon a time and had it working, but it was quite a while ago. Opera 7, if i recall.And Zorn javascript code is excellent, indeed, but it is javascript... I always prefer to work in CSS if possible.Checking your posting time, it may have been after you saw the page...*edit*Thanks, folks...Updated, changes the anchors and placed a note about Opera.http://www.jlhaslip.trap17.com/samples/tooltips/index.html Link to comment Share on other sites More sharing options...
jlhaslip Posted September 21, 2007 Share Posted September 21, 2007 There is no javascript in my link, just CSS. Link to comment Share on other sites More sharing options...
webspider25 Posted September 21, 2007 Author Share Posted September 21, 2007 <a class="info" href="#">display text<span>Tool Tip Text Here</span></a>This is the code that I got on ur link....But its not complete As u r using the class="info" but where is the code of the class????Actually this is wat i really needed and ur link will help me a lot if i got that code tooWaiting for the codeBye There is no javascript in my link, just CSS. Link to comment Share on other sites More sharing options...
webspider25 Posted September 21, 2007 Author Share Posted September 21, 2007 HI,Thnaks a lot .....I got the code and its very very useful for methanksbye <a class="info" href="#">display text<span>Tool Tip Text Here</span></a>This is the code that I got on ur link....But its not complete As u r using the class="info" but where is the code of the class????Actually this is wat i really needed and ur link will help me a lot if i got that code tooWaiting for the codeBye Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted September 22, 2007 Share Posted September 22, 2007 Ok before I put it on my site, I would like to know if it is the images thing that is incompatible with Opera or is it the whole CSS thing?Also, is this compatible with IE7 only or does IE6 work with it also? I thought that IE6 didn't have support for :hover pseudo-class. Link to comment Share on other sites More sharing options...
jlhaslip Posted September 23, 2007 Share Posted September 23, 2007 Opera seems to not like any of them. Still checking some stuff on that issue, but it doesn't look promising. Just got a new Opera today, so I will continue to work on it.IE doesn't mind any of it at all, but you will notice that all of the 'tool tip info' is inside an anchor tag, so IE6 will react properly, because as you point out, IE6 will only recognize the hover pseudo-class for <a> tags. Only IE issue would be to not use a .png formtted images, since IE doesn't play well with those (yet). IE7 is better, though not perfect... Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted September 23, 2007 Share Posted September 23, 2007 Ok, the whole thing is reposted at http://portal.trap17.com/wdl/code/css/rad_tooltips.php.Oh and don't forget to read the bottom left. Link to comment Share on other sites More sharing options...
jlhaslip Posted September 23, 2007 Share Posted September 23, 2007 That's a nice site, by the way.And thanks for the 'thanks'... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.