I've found the code for an almost perfect css tooltip. I've been able to very nearly adapt it to what I want, but in order to have it perfect I need to use different tags, and that's where the problem lies. It consists of <p> and <span> wrapped up in a div. When I tried changing the span tag to div and experiment with the p tag the text information was no longer hidden.
I'm fine with css & html, but I'm out of my depth here, I've not coded hidden elements before.
Here's a link to what I have http://www.k9carer.eu/sidebar_right.php
I want the link font smaller and the text information larger. I'm trying to decide if I want to put a border around the text, but that's not important. With the right tags in place, I'll be able to do that myself.
Here's the code:
I'm fine with css & html, but I'm out of my depth here, I've not coded hidden elements before.
Here's a link to what I have http://www.k9carer.eu/sidebar_right.php
I want the link font smaller and the text information larger. I'm trying to decide if I want to put a border around the text, but that's not important. With the right tags in place, I'll be able to do that myself.
Here's the code:
Code:
#dogcharity {
background-color: #1A0600;
position: inherit;
padding: 1px;}
p.navlink {font-weight: bold;
text-align: center;
margin-bottom: 1px;
margin-top: 0px;}
p.navlink a {text-decoration: none;
display: block;
color: #D0C395;
background-color: #1A0600;
font-family: "Times New Roman", Roman, Serif;
font-size:100%;
color: #D0C395;
margin: 0 2px 0 0;
padding: 2px 2px 2px 2px;
border: 2px #B09E7D solid;
border-style: outset;
}
p.navlink a:hover {background-color: #D0C395 color:#1A0600;}
p.navlink a:link span {display: none;}
p.navlink a:visited span {display: none;}
p.navlink a:hover span {font-size: .8em;
position:absolute;
top: 18em;
left:75%;
font-weight: normal;
display: block;
}
span{color:#ffffff;
}
HTML:
<div id="dogcharity">
<p class="navlink"><a href="www.dogaid.co.uk">DOG A.I.D.
<span id="charity">A national voluntary organisation which
provides specialised training for people with physical
disabilities and their own pet dog</span></a></p>
<p class="navlink"><a href="www.caninepartners.co.uk/" >
CANINE PARTNERS
<span id="charity">Training Assistance Dogs for people
with disabilities</span></a></p>
<p class="navlink"><a href="www.dogsforthedisabled.org/">
DOGS FOR THE DISABLED
<span id="charity">creates life-changing partnerships by
training assistance dogs to help children and adults with
disabilities lead a fuller, more independent life</span></a></p>
</div>