Customise bubble appearance

Changing the appearance of the bubbles produced by our Javascript glossary requires only telling it not to use the default CSS, and then adding an alternative to your site's CSS.

We are also looking for ideas for out of the box alternatives, so please send in ideas.

If you are using custom CSS the javascipt snippet changes to this:

You can probably get what you want by starting from the default CSS, which is shown below.

If you want more customisation than this you will need a customised Javascript, or to use the API.

In either case you must retain the link to Moneyterms, and make it clear that it is a link.

a.moneytermsLink {
    border-bottom: 1px dotted;
a.moneytermsLink span {
    display: none;
/*empty background is requred by IE*/
a.moneytermsLink:hover {
a.moneytermsLink:hover span.moneytermsDef {
    top: 1em;
    left: -5em;
    padding: 1em;
    border: 1px solid black;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    color: #fff;
    -moz-box-shadow: 0 0 15px black;
    -webkit-box-shadow:  0px 0px 15px black;
    box-shadow: 0px 0px 15px black;
a.moneytermsLink span em {

The main things to note about this are:

  • The link appearance is changed to make it look different from a normal link
  • When you hover over the link, the inner <span> is set to display:block and position:absolute.
  • Because the original <a> tag has been set to position:relative, the top and left positions are relative to it
  • The word "More" which looks like a link in the default CSS (blue underlined) is inside an <em> tag. This is because we need something that can be styled to look like a link, will display correctly inside a <span> set to display:block, and which makes reasonable sense semantically.
  • By using the API you agree to the terms of use

Copyright © 2005-2016