This Is Not Javascript ~ Just CSS
Use these pop up boxes to make definition boxes
They are very handy to give meanings to words that need explanations on your webpages. I use them a lot on my nutritional site to define medical, scientific, and chemical words that are needing a definition.
The style rules are long and pretty complex, but the HTML code in the body of the webpage is only a few lines.
Let's look at the HTML first.
This is what appears on the webpage, using that code.
I need the definition of some word
definition of some word
A
?
some definition
by making the definition pop up when the visitor hovers over the word.
This popup box uses "span" instead of "div" to display the different "id's" that we defined in the style sheet. This keeps the box within the paragraph, because you can't have a "div" appearing in the middle of the block of text. A paragraph is a block element and so is a div.
We use an anchor <a> tag for the box, because we don't want it to go anywhere, by defining the link as #nogo. This goes before the word you want defined, just like any <a> tag comes before the reference. Type in your word to be defined, leaving a space before <a id="popup">, and after your word so it doesn't crowd up next to the text before and after the word.
This is where the <span> comes into use. Because the word being defined is within a paragraph, we use "span id's" to style the popbox.
- First the popbox id which will make the popup box
- Next, the poptop id for the colored border at the top, adding the text you wish to appear in the top border
- The colored triangle or warning id is added next
- Then add the warningbox id with the capital letter "A" or an " ! ", or what ever single character you want to appear in the box
- To make the " ? " for the top right corner we add the x id
- Next add a <br /> tag and type in the acronym, which is the definition of your word. Close the acronym tag and add another <br / > tag
- Close the popbox id with the closing </span> tag and close your opening <a id="popup"> with a closing </a> tag.
If you are including this popup box in a paragraph, you can continue on with the rest of the paragraph, then close it with a </p> tag.
I keep the HTML for the popup box in a file all it's own, and have it open in my editor as the first file. Then, if I need it to define a word, all I have to do is copy and paste it into my paragraph, without having to type in all the code.
See the CSS Code here.