cjeanson Posted October 27, 2006 Share Posted October 27, 2006 Hello all, I am looking at adding some additional functionality to a website that is running some online store software. I tried running a few searches but came up with nada.Anyway, I am aware of the benefits of using <a title> (and additionally <a alt> for IE) to provide additional information for a specific term or terms.However, I have found a limit of approximately 90 or so characters, which is a bit less than I want. Ideally, I would like to display the information in multiple lines, with a full description.Is there any way to accomplish this with basic HTML?I am aware that Javascript can do something like I have described, but the reason I do not believe that it is a key option is that I would have to load the script HTML into every page of the site to ensure that it works properly. Since it is a site that is largely "closed" I don't have access to the code to make an HTML insertion.Thanks for all of your help! Link to comment Share on other sites More sharing options...
reportingsjr Posted October 27, 2006 Share Posted October 27, 2006 go to dynamicdrive.com and search for dropdown menus. I do believe thats what your looking for! Those will be alot better suited anyways.. Link to comment Share on other sites More sharing options...
scott100 Posted October 27, 2006 Share Posted October 27, 2006 go to dynamicdrive.com and search for dropdown menus. I do believe thats what your looking for! Those will be alot better suited anyways..Tooltip descriptes what you are after: http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htmBut that requires Javascript and there is not plain HTML im aware of The javascript itself can go straight into the body, the css would be the head. Link to comment Share on other sites More sharing options...
cjeanson Posted October 27, 2006 Author Share Posted October 27, 2006 Thanks to both, the tooltip is basically what I am looking to do.However I will have to find a place to include the HTML within the online store so that it loads with every page if I want to use the javascript approach.I will look into it, however if anyone can come up with a non-js solution I would love to hear it as well!Take Care, and thanks to both of you again! Link to comment Share on other sites More sharing options...
scott100 Posted October 27, 2006 Share Posted October 27, 2006 however if anyone can come up with a non-js solution I would love to hear it as well!Got it Pure hmtl/css <head><style>a.info{ position:relative; /*this is the key*/ z-index:24; background-color:#ccc; color:#000; text-decoration:none}a.info:hover{z-index:25; background-color:#ff0}a.info span{display: none}a.info:hover span{ /*the span will display just on :hover state*/ display:block; position:absolute; top:2em; left:2em; width:15em; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center} </style> </head> <body>What is a tooltip? <a class=info href="#">This is a tooltip<span>an aiding text that appears just when you roll on with the mouse<br />Hello<br />Goodbye</span></a>.</body> Link to comment Share on other sites More sharing options...
holmedwa04 Posted October 28, 2006 Share Posted October 28, 2006 When using the title attribute I think you can't use ' perhaps that is a problem that you are havng, but then thinking about it, it wouldn't display at all. Sorry Link to comment Share on other sites More sharing options...
scott100 Posted October 28, 2006 Share Posted October 28, 2006 It's ok to use the apostrophe <p title="I'm fine">Highlight</p> Link to comment Share on other sites More sharing options...
holmedwa04 Posted October 28, 2006 Share Posted October 28, 2006 Oh, I must be getting confused with alert messages and auto text in a textarea, very tired at the momment! Link to comment Share on other sites More sharing options...
cjeanson Posted October 30, 2006 Author Share Posted October 30, 2006 Thank you so much! I managed to get the JS version going, but I prefer the cleanness and simplicity of css's approach, as well as the ease of modification!Thanks again, you guys are amazing!P.S. I should have thought of this approach, need more coffee.Take Care! Link to comment Share on other sites More sharing options...
cjeanson Posted October 30, 2006 Author Share Posted October 30, 2006 Thank you so much! I managed to get the JS version going, but I prefer the cleanness and simplicity of css's approach, as well as the ease of modification!Thanks again, you guys are amazing!P.S. I should have thought of this approach, need more coffee.Take Care!I was surprised to see that IE7 supports the css method, but IE6 does not.Is there a workaround for IE6? Link to comment Share on other sites More sharing options...
cjeanson Posted October 30, 2006 Author Share Posted October 30, 2006 Apparently I spoke too soon about the JS version.I have copied the Javascript from the dhtmltooltip link into an external JS file (of course excluding the <script> and </script> tags. I have attached it to the page in question.I originally used an <a> selector: <a href="#" onMouseover="ddrivetip('Info')"; onMouseout="hideddrivetip()">Hyper Progressive</a> That didn't work, so I figured that I should use something like in the example. They used a <div> but I would prefer to use an inline selector, so I went with: <span onMouseover="ddrivetip('Info')"; onMouseout="hideddrivetip()">Hyper Progressive</span> Anyway, the mouseover doesn't appear to work at all. I am sure I am making a stupid mistake.I have confirmed from looking at the source code that the .js file is loading, is not corrupt, and matches that from the site. Link to comment Share on other sites More sharing options...
scott100 Posted October 30, 2006 Share Posted October 30, 2006 I was surprised to see that IE7 supports the css method, but IE6 does not.Is there a workaround for IE6?I just checked it with IE6 and it works fine I just downloaded it all and it works ok.i tried it with<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')"; onMouseout="hideddrivetip()">Search Engine</a> Make sure you have it working first then try puting the javascript into an external file. Link to comment Share on other sites More sharing options...
cjeanson Posted October 30, 2006 Author Share Posted October 30, 2006 I just checked it with IE6 and it works fine I just downloaded it all and it works ok.Been trying a lot of different browsers, and have run into an issue.The page is online here: Demo LinkFirefox 2 - OKIE 7 - OKOpera - buggy (doesn't seem to set the width properly, height is too small as well)(still have to check safari and whatnot)CSS In Place:a.info{position:relative; /*this is the key*/background-color:#ffffff;color:#ff3333;text-decoration:underline}a.info:hover{z-index:25; color:#ff3333; background-color:#ffffff}a.info span{display: none}a.info:hover span{ /*the span will display just on :hover state*/display:block;position:absolute;padding: .5em;top:3em; left:2em; width:30em;border:1px solid #000000; /* or black bg?*/background-color:#ffffff; /* e3e3e3 for light grey / ff3846 - red bg*/ color:#000;text-align: center} HTML in use: <a class="info" href="#">Hybritech<span><img src="http://alteregosports.com/dir/1190/files/k2_hybritech.gif" alt="Hybritech Technology"><br />Description</span></a> If everything looks good on your browsers then I will stop worrying, but for some reason I don't think it will... Link to comment Share on other sites More sharing options...
scott100 Posted October 31, 2006 Share Posted October 31, 2006 I checked your link, Opera is buggy and IE6 doesn't work at all That's strange, the code i posted originally works fine - did you try that before you made any changes Link to comment Share on other sites More sharing options...
cjeanson Posted October 31, 2006 Author Share Posted October 31, 2006 I checked your link, Opera is buggy and IE6 doesn't work at all That's strange, the code i posted originally works fine - did you try that before you made any changes Well, I will have to do some looking to find out why this code is the issue:a.info:hover{z-index:25; background-color:#ff0} If I change the background-color to transparent, or remove the declaration it stops working.However, it should work in IE6 now, seems to run fine on my IE6, 7, FF2, just need to check some other browsers.Thanks again, this should be o.k. for now! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now