Enhancing On-Page Findability with Customized Tips
There are two ways of enhancing and optimizing Web site's findability: for search engines and for the Web user. Optimizing for the search engines is important as we all know, but enhancing and optimizing Web site's findability for the Web user is of no less importance and that includes structured and well-organized navigation, readable text, site search and displaying helpful messages when needed.
The link tag, (A), has an attribute (Title) often used to display messages for the Web user when the mouse hovers over the link. Depending on the browser, the default is a label with the attribute's text. With the help of Java Script, jQuery and a superb jQuery plugin called clueTip it is dead simple to extend the functionality to new heights that is both user-friendly and search engine friendly.
There are many options provided with clueTip that functions both as a simple pop up or as a modal dialog that can contain HTML code and window functionality. We implemented the clueTip jQuery plugin on this page with examples contained within this paragraph. Try it and if you like it please follow the links below to implement clueTip on your Web site. If we can do it, so can you, plain and simple.
Required downloads for these examples:
HTML and Java Script code for this example.
<div>
<a class="title" href="#" title="Basic example of clueTip|This is the main part
that can be split into sections with a pipe. It is easy to modify look and feel with
the style sheet or from the jQuery Java Script code.|<b>
Imagine the possibilities.</b> ">Basic example</a>
</div>
<div>
<span title="The Title|This is a clueTip that is split with a pipe
and has a nice arrow effect. |Options and CSS styles can be set within the
plugin configuration.">clueTip with Arrow</span>
</div>
$(document).ready(function(){
$('a.title').cluetip({splitTitle: '|'});
$('span[@title]').css({borderBottom: '1px solid #900'}).cluetip({
splitTitle: '|',
arrows: true,
dropShadow: false,
cluetipClass: 'jtip'}
);
});