crmamx Posted February 18, 2013 Share Posted February 18, 2013 This is the best example I could come up with. When I hover on the link in the box, I don't want to link to the data, I want the additional data to appear in the expandable blue hover box. I have no clue how to do it. <html> <head> <title>Event Calendar</title> <style> html { font-size: 62.5%; } body { font: 1.2em/1.3 Arial, Helvetica, sans-serif; background-color: #cef; padding: 2em 0 0 2em; } h1 { font-size: 2.5em; margin: 0; } #calendar { margin: 0; padding: 0; width: 700px; border: 2px solid #333; background-color: #ddd; } #calendar li { list-style-position: inside; font-weight: bold; width: 88px; height: 88px; border: 1px solid #999; float: left; background-color: #fff; padding: 5px; overflow: hidden; } #calendar li:hover { overflow: visible; } #calendar li ul { margin: 0; padding: 0; clear: both; } #calendar li ul li { list-style: none; font-weight: normal; float: none; border: none; padding: 5px 0; margin: 0; } #calendar li:hover ul li, #calendar li.hover ul li { position: absolute; width: 150px; margin-left: -38px; height: auto; background-color: #8cf; border: 1px solid #069; padding: 10px; z-index: 10; } #calendar li.wednesday { margin-left: 300px; } .clear { clear: both; } </style> </head> <body> <ol id="calendar"> <li class="wednesday"> <ul> <li><a href="#event1">Event 1</a></li> </ul> </li> </ol> <p class="clear"></p> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <!-- just for test --> <a name="event1"></a> 6/8/2013 -- Summerdale, AL (C) MAGNOLIA SAILPLANE FESTIVAL. Site: Magnolia Field. John Phillips CD PH: 251-343-xxxx Email: xxxxxxx@bellsouth.net. Visit: www.ty.com. All Sailplanes welcome including electrics. Gates open at 8AM, pilots meeting at 9AM. Landing fee $7.50 which includes lunch and drinks throughout the day. Winch and high start launches available. Please visit website for additional info and map. Sponsor: BAY AREA RC SOC BARCS </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/274631-how-to-display-additional-data-on-hover/ Share on other sites More sharing options...
lilmer Posted February 27, 2013 Share Posted February 27, 2013 If you want to make your page dynamic, try to use javascript. Quote Link to comment https://forums.phpfreaks.com/topic/274631-how-to-display-additional-data-on-hover/#findComment-1415281 Share on other sites More sharing options...
teynon Posted February 27, 2013 Share Posted February 27, 2013 http://craigsworks.com/projects/qtip/demos/content/basic Quote Link to comment https://forums.phpfreaks.com/topic/274631-how-to-display-additional-data-on-hover/#findComment-1415303 Share on other sites More sharing options...
crmamx Posted February 27, 2013 Author Share Posted February 27, 2013 http://craigsworks.com/projects/qtip/demos/content/basic Thanks Tom. That is exactly what I was looking for. Only problem is it is way above my head. I know a tiny bit about javascript and nothing about jQuery. What I have is ugly but it works so I guess I will leave it for now. Checked out your web site and it looks like you are on your way to a great career. The best of luck to you. Just wondering why you have not updated it in 2 years? Quote Link to comment https://forums.phpfreaks.com/topic/274631-how-to-display-additional-data-on-hover/#findComment-1415378 Share on other sites More sharing options...
crmamx Posted February 27, 2013 Author Share Posted February 27, 2013 (edited) I guess I will have to change my "if at first you don't succeed, QUIT." As mentioned before, the jQuery and javascript solutions were just way over my head. But I kept looking and found Eric Myer's Pure CSS Tooltips. Perfect! I ended up with this code to do what I want. So simple. <html <head> <style type="text/css"> 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> <!-- Tooltip 1 --> <p>What is a tooltip? <a class=info href="#">This is a tooltip <span>A tootip is text or image that appears just when you roll on with the mouse</span></a>. <!-- Tooltip 2 --> <p>The basic idea comes from Eric Meyer's <a class=info href="#"><b>pure css popups</b><span>A very clever way to get dynamic effects on an html page without using javascript.</span></a></p> <br /><br /><br /><br /> </body> </html> Edited February 27, 2013 by crmamx Quote Link to comment https://forums.phpfreaks.com/topic/274631-how-to-display-additional-data-on-hover/#findComment-1415423 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.