How do I create a hover box, with relevant information for that point in the text?

Hi,

I am very new to all this - I may even have posted in the wrong forum! I have recently completed an online course in HTML and CSS. I purchased the book ‘Build your own Web Site the Right Way using HTML and CSS’ (that is how I found this forum).

Sadly when the book arrived - it is NOT HTML but XHTML - how confusing!

I am designing a family history site - the content of which is being taken from old family papers, which in turn have many ‘notes and references’ which would mess up the ‘readability’ of the page if included.

I would like to add a ‘hover box’ so that when I hover over the given ‘link’ a box shows the brief reference for those who need to look at it. (Rather than have to jump from one page to another all the time - as with a book).

Can someone please help me?? or direct me to the correct forum!

As I said I have only just completed an Online course in HTML and CSS - a real beginner! - and so wish for the present to stick with this format - therefore my request applies them. Should I not be able to do this in this format - I would rather know now, than raise my hopes that I might be capable of doing it!

Thank you in advance!

TiggyT :rolleyes:

Why don’t you just use title

<a href="http://yoursite.com/your-directory/link1" title="the brief reference of yours"> 
 Linky   </a>

…also welcome on SP!

Hi there,

Welcome to the community. :beer:

First of all, look here for the differences between HTML and XHTML and why, at this point in time, you can’t take advantage of actual XHTML features anyway.

For tooltips which provide additional information, there is the TITLE attribute.

Example:


<p>My name is <a href="/info/" title="Find out more about James Bond and his line of work">James Bond</a></p>

This attribute is not limited to anchors – you can use it on almost every other element, if need be.

If you want to pretty the ‘tool-tips’ up a little, you could look into some JavaScript toppings, such as this.

[url=“http://www.mojavelinux.com/projects/domtooltip/”]Dom Tooltip](http://www.dustindiaz.com/sweet-titles) is another good example.

Thank you all for your help - it is much appreciated! May come back again and ask later, at present I am using more conventional means to give the information. As I get more confident with my ‘programming’ (which it seems like to me!) I will try your suggestions. :slight_smile:

hey titggy im from wales 2 m8 nice to see a felow welsh man on here! swansea im from need any help drop me a line :smiley: