Tooltips (without CSS)
Tooltips without CSS using a javascript, html codeblock and iframe combination
Javascript File
Add tooltip.js to the page.
Click on the link, copy the whole text into Notepad or another text editor and save as tooltip.js, then upload that file to a page on your site. If it is not the current page the location in the codeblock below will need changing.
tooltip.js
Codeblock
- Make sure that before the <html> you have [!-- then on the next line [[code type="html]]
- make sure that after the </html> you have [[/code]] then on the next line --]
- The url of the file will need to be changed and the href of the stylesheet changed to ""
- The main text goes inside the span tags
- The tooltip text goes inside the var
<html> <head> <script language="javascript" src="http://strathviewconsultants.wikidot.com/local--files/support:tooltips/tooltip.js"></script> <LINK rel="stylesheet" type="text/css" href="""> </head> <body onload=init()> <span style="color:#468259; font-size:90%;" class="ttip" onmouseover=if(t1)t1.Show(event,l1) onmouseout=if(t1)t1.Hide(event)> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare sollicitudin elit ac porta. Integer dolor orci, convallis ut fermentum vel, vestibulum vitae quam. </span><br> <p> <span style="color:maroon; font-size:90%;" class="ttip" onmouseover=if(t1)t1.Show(event,l2) onmouseout=if(t1)t1.Hide(event)> I was recently on a tour of Latin America, and the only regret I have was that I didn't study Latin harder in school so I could converse with those people. </span> <div id="a" style="background-color:#FFFBD1;width:150px; height:70px; border:solid 1px #468259; text-align:center;font-size:75%"> </div> </body> <script> var t1=null; var l1="Lorem Ipsum is dummy text which was first used by printers in the 1500s and is designed to look like Latin"; var l2="As said by Dan Quayle, former Vice President of the USA"; function init() { t1 = new ToolTip("a",false); } </script> </html>
Iframe
[[iframe http://strathviewconsultants.wikidot.com/support:tooltips/code/1 frameborder="0" scrolling="no" width="760px" height="150px"]]
The /code/1 refers to the number of the codeblock on the page. In this example the codeblock was the first one, hence /code/1. If it was the second it would have been /code/2 etc.
Result
Comment
- All text must be inside the codeblock. It cannot just be added to the wikidot page using the normal edit procedures.
- The span properties and values can be added to and changed here, as I have done by adding color and font-size properties.
- If there are more than 2 tooltips required, the var l2 will need increasing to var l3 etc. And the event number would need to be increased in the span to Show(event,l3) etc.
- The div in the codeblock is for the tooltip box and must not be deleted. Its properties can be customised.
- The height of the iframe will need to be adjusted for the length of text.
- Any changes to the codeblock will require clearing the browser cache and then refreshing the page to see the change.
