NiceTitle.js is a relatively simple script that creates a div-container which pops up when a link, with the title attribute, is hovered. This container shows what is written in the title attribute, plus the URL the link directs to.
Installation
We first need to install the script, which can be found here. To do this, we must add the following code, before </head>:
<script type="text/javascript" src="URL_nicetitle.js"></script>
Customization
In order to style the container displayed when the links are hovered, we need to copy and customize the following code, right before ]</b:skin>:
div.nicetitle {
background-color: #A38531;
color: #fff;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
padding: 4px;
position: absolute; top: 0; left: 0;
text-align: left;
width: 25em;
z-index: 20;
}
div.nicetitle p {
margin: 0;
padding: 0 3px;
}
div.nicetitle p.destination {
font-size: 9px;
padding-top: 3px;
text-align: left;
}
a) div.nicetitle{} is the main container that pops up when the link is hovered. You can change its background (color or image), its font, border properties and width.
b) div.nicetitle p{} is the paragraph inside the main container. There aren’t really too many things to customize, but you can apply some padding and margins.
c) div.nicetitle p.destination{} is the URL displayed below each link title. You can either opt to reduce its font-size, or simply not to display it (by adding display: none;).
Usage
Do not forget that for the script to display this container, you must add the title attribute to the links you want. Here’s an example:
<a href="site_URL" title="Text to be displayed">Link Text</a>