Add A Dynamic Hover Tool-Tip

Example: Add a custom tool-tip to text and image link hovers within your site.

Note: This script allows you to create more visually distinct tool-tips for link and image hovers within your site. You must first download the author's script (choose the production version of the file under the download section on this page). Then, upload the script file to your storage prior to implementing this code. You can style the tool-tip to your preference by editing the CSS within the Custom CSS pane of the style editor. You can see a live demonstration of this tool-tip in the Javascript Guide. 

In Extra Header Code Injection put:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script  type="text/javascript" src="/storage/jquery.tinyTips.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.tTip').tinyTips('light', 'title');
});
</script>

In HTML put:

<a class="tTip" title="Text content for your hover tool-tip here." href="#">Your link text here.</a>

In Custom CSS put:

/* Javascript Tooltip */

.lightTip { width: 230px;  margin-left: 46px; font-size: .8em; line-height: 1.4em; }
.lightTip .content { width: 210px; padding: 20px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background:#222222; color: #f6f6f6; }