Jump to content

How to display additional data on hover?


Recommended Posts

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.


<title>Event Calendar</title>
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; }

<ol id="calendar">
<li class="wednesday">
<li><a href="#event1">Event 1</a></li>
<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

Link to comment
Share on other sites

  • 2 weeks later...

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?

Link to comment
Share on other sites

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.



<style type="text/css">
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;

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*/
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}
<!-- 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 />

Edited by crmamx
Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.