Wikidot Design & Development

Customise footnotes and hovertips simultaneously

Kill two birds with one stone1 and customise footnotes and inbuilt hovertips at the same time with less than 20 lines of code.

While I’m busy researching for our first Guide Series post, I thought I had better give you all something to nibble on, so here’s a (very) quick guide to changing the appearance of footnotes and inbuilt hover tips (the tips that popup when you hover over the options in the default wikidot footer) - they use the same hovertip class, so we can customise the two at the same time. As always, you should change the colours used to match your site’s theme (unless the theme you chose for your site is blue, in which case you chose well).

So, using the hovertip class, we’ll define the background colour, change the colour of the border, round the corners and give it a drop shadow to give the appearance of it hovering over the page. Oh, and of course we’ll also add a gradient to the background.

Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.