making footnotes
September 8, 2010 3:10 AM Subscribe
How do I make slick roll-over footnotes like the ones in this Slate article. Can I use html? Could I do it in a MetaFilter comment?
If you view the source of the webpage, you can see that it's done using Javascript. The section of code in the page source that does the pop-up footnote effect has the comment tag <!--Gutenberg HTML insert--> at the start and end of it, if that helps.
Since it is in Javascript, no you can't use it on MetaFilter, as MeFi only allows HTML code, and only certain tags at that. The closest you can get here in terms of pop-up "footnotes", is using the 'a' tag like this:
<a title="footnote here">some text</a>
to get this:
some text
Or the 'acronym' tag like this:
<acronym title="footnote here">some text</a>
to get this:
some text
posted by EndsOfInvention at 3:26 AM on September 8, 2010
Since it is in Javascript, no you can't use it on MetaFilter, as MeFi only allows HTML code, and only certain tags at that. The closest you can get here in terms of pop-up "footnotes", is using the 'a' tag like this:
<a title="footnote here">some text</a>
to get this:
some text
Or the 'acronym' tag like this:
<acronym title="footnote here">some text</a>
to get this:
some text
posted by EndsOfInvention at 3:26 AM on September 8, 2010
You do it by hiding/showing an element with javascript and manipulating its position and z-index with CSS. You can't do this with plain HTML, but like EndsOfInvention writes, you can maybe fake it with a title attribute or an acronym tag.
posted by beerbajay at 3:37 AM on September 8, 2010
posted by beerbajay at 3:37 AM on September 8, 2010
A better way than going through the entire source is to highlight the thing and choose 'View selection source' or install Firebug and then right click on the item and choose Inspect Element.
If you want to do something like this on your own website then I wouldn't suggest copying how Slate does it, as their method is quite messy and isn't semantically clean with all that inline code. A clean implementation would hide all that away in external files and would only have p/span/div elements with a given class or ID to key it off of in the HTML. Some implementations even reuse the existing 'title' attribute to do the fancy tooltips, so that the HTML looks identical to EndsOfInvention's but has fancy styling. Here's a bunch of examples using jQuery. I'm sure you can find others out there, as there are tons of these.
posted by Rhomboid at 3:48 AM on September 8, 2010
If you want to do something like this on your own website then I wouldn't suggest copying how Slate does it, as their method is quite messy and isn't semantically clean with all that inline code. A clean implementation would hide all that away in external files and would only have p/span/div elements with a given class or ID to key it off of in the HTML. Some implementations even reuse the existing 'title' attribute to do the fancy tooltips, so that the HTML looks identical to EndsOfInvention's but has fancy styling. Here's a bunch of examples using jQuery. I'm sure you can find others out there, as there are tons of these.
posted by Rhomboid at 3:48 AM on September 8, 2010
That article uses Prototip, a JavaScript library that relies on Prototype.
No, you could not use that inside a Metafilter comment, but you can place content in
posted by artlung at 5:11 AM on September 8, 2010 [1 favorite]
No, you could not use that inside a Metafilter comment, but you can place content in
title attributes.posted by artlung at 5:11 AM on September 8, 2010 [1 favorite]
The
posted by artlung at 5:13 AM on September 8, 2010
title attribute I added to the <code> tag got stripped.posted by artlung at 5:13 AM on September 8, 2010
As artlung points out, you can sorta do it with a title attribute. Roll over this sentence to see it in action.
posted by MrMoonPie at 7:42 AM on September 8, 2010
posted by MrMoonPie at 7:42 AM on September 8, 2010
qTip is a nice, open-source jQuery (javascript) library that does stylized tooltips.
posted by callmejay at 8:12 AM on September 8, 2010 [1 favorite]
posted by callmejay at 8:12 AM on September 8, 2010 [1 favorite]
If you want the whole popping up text in a pretty box you can do this without javascript, but you'd have to use some CSS instead which you can't do in comments here on MeFi. And it would probably work in fewer browsers/browser versions than the method using javascript.
What you'd do is have some running text:
Well, you'd have to change it a bit, because that would just push the text onto the same line as the text you're already displaying, you'd need to make it a floaty box, but that shouldn't be too hard. Basically you're telling the browser to not show any footnotes unless the user is hovering over the footnote marker.
posted by bjrn at 8:14 AM on September 8, 2010
What you'd do is have some running text:
<p>Here is some text with a footnote <sup>+<span class="footnote">Footnote text</span></sup>. and then you'd have CSS along the lines of sup span.footnote { display:none; } sup:hover span.footnote { display:inline; border:1px solid black; }Well, you'd have to change it a bit, because that would just push the text onto the same line as the text you're already displaying, you'd need to make it a floaty box, but that shouldn't be too hard. Basically you're telling the browser to not show any footnotes unless the user is hovering over the footnote marker.
posted by bjrn at 8:14 AM on September 8, 2010
I just did something similar recently here (mouse hover on the lecture titles). Of the solutions I tried, I chose dhtmltooltip as it seemed quite snappy.
posted by Dick Paris at 7:29 AM on September 9, 2010
posted by Dick Paris at 7:29 AM on September 9, 2010
This thread is closed to new comments.
posted by mireille at 3:26 AM on September 8, 2010