Tooltips
Tooltips can be used for additional information about a specific word(s).
There are a few ways of implementing them and it really is based on what your requirements and needs are for the tooltips.
Basic Implementation
This is a text only tooltip that requires NO additional files and can be done within the one page by ensuring that the text for the 'title' of the link has the heading first, then a dividing '|' and then the description text after. For this tooltip, the href is left as '#' because the content is on the current page.
Use the below code for each tooltip:
This is some text linking to a tooltip.
- - -
Customised Implementation
This setup requires additional HTML files for each tooltip. You would use this in the case where you may want to have actual HTML markup in the tooltip or even place an image in the descriptive section of the tooltip. Here you change the href="#" to where you have placed the tooltip file.
Note: the below example uses a folder named 'tooltips' within the current pages folder. Each tooltip is an individual HTML file that should sit within the tooltips folder. The title of the anchor link to the tooltip, is used as the title of the tooltip.
Use the below code for each tooltip:
This is some text linking to a tooltip.
Individual HTML Pages for the Tooltip
The tooltip file needs to have its own HTML wrapper. Please use the following code for each individual HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>Insert text here</p>
<img alt="#" src="//www-uat.adelaide.edu.au/placeholder/235x150">
</body>
</html>
- - -
