Most of the functionality in the solution described will be accomplished using jQuery
functions and a jQuery Plugin.
jQuery is a "JavaScript Library that simplifies HTML document traversing, event handling,
animating, and Ajax interactions for rapid web development". Created by John Resig, it has grown by leaps & bounds with help from the web
development community. A jQuery Plugin is a way of packaging reusable code by
leveraging jQuery's extensible architecture. Using a jQuery Plugin is just a
matter of including an external JavaScript file. As the Plugin is dependent on
jQuery we have to call it after we have referenced the jQuery Library.
How it works
The job of scanning a web page to find words matching those in a Glossary and highlighting
them will be done by a jQuery Plugin called SearchHighlight (in DynamicToolTip.html). You can get this SearchHighlight Plugin from it's home page on jQuery.info. This Plugin basically takes the list of words that we want to match and whenever
it finds a matching word in a web page, it wraps the word within a SPAN tag and
the style setting for the SPAN gives the highlighted effect. Next, in order to
show a dynamic tooltip we will use the SPAN tag's TITLE attribute. The content
for the TITLE attribute will be fetched asynchronously from the Glossary which
is a dynamic web page that retrieves keyword descriptions from a data source.
The Glossary page can be implemented as a Generic Handler (.ashx) or a simple .ASPX page that returns just the description of a keyword which is provided to it as a querystring
value. jQuery makes DOM manipulation & AJAX interaction simple as you will
see in the code below. You can first run the no-frills sample and hover over the highlighted word to see the dynamic tooltip before browsing through
the code.
DynamicToolTip.html
<html>
<head>
<title>Dynamic Tooltips</title>
<script src=
"js/jquery.js" temp_src=
"js/jquery.js" type=
"text/javascript"></script>
<script src=
"js/SearchHighlight.js" temp_src=
"js/SearchHighlight.js" type=
"text/javascript"></script>
<script language=
"javascript" type=
"text/javascript">
$(document).ready(
function(){
var options = {
exact:
"exact",
style_name_suffix:
false,
keys:
"Firebug, YSlow, neXpert"
}
$(document).SearchHighlight(options);
$(
".hilite").hover(
function (){
var selWord=$(
this).text();
var wrd =
this;
$.get(
"glossary.aspx", { q: selWord},
function(data){
$(wrd).attr(
"title",data);
});
},
function(){ }
)
});
</script>
<style type=
"text/css">
.hilite
{
background-color: yellow;
cursor: help;
}
</style>
</head>
<body>
<div>
Use tools like FireFox Firebug addon YSlow or the Fiddler add-on neXpert, to analyze
web pages and identify why they're slow.
</div>
</body>
</html>
The jQuery Library can be downloaded from it's home page.
The SearchHighlight(options) function has a number of configuration options but we will be using just three,
the important one being "keys" which allows us to explicitly set the
words to be searched for. To keep the code simple, only 3 words "Firebug,
YSlow, neXpert" are used but in a realistic scenario it can include as many
words as there are in a moderate-sized Glossary.
hilite is the name of the class for the SPAN element that wraps the words to be highlighted.
The hover event is used to generate dynamic tooltip. When user moves his mouse over a highlighted
word [ let's say, Firebug ], that word is captured [ var selWord=$(this).text(); ] and sent to glossary.aspx as a querystring [ glossary.aspx?q=Firebug ] via the jQuery .get() function. The description that is returned back by glossary.aspx is fetched by the callback
function which is the third argument of .get(). The jQuery .attr() function assigns the fetched description to the TITLE attribute of the SPAN tag. As a result
when you hover your mouse over a highlighted word, you will see it's equivalent
description. This is how the HTML for the dynamically rendered element will look
after the hover event has done it's job -
<span title="The Firebug extension for Mozilla Firefox allows the debugging,
editing, and monitoring of any website's CSS, HTML, DOM, and JavaScript, and
provides other Web development tools." class="hilite">Firebug</span>
For the sake of the demo, the code for the Glossary page that is referred earlier
could look something like this -
Glossary.aspx
<%@ Page Language="C#" %>
<script runat="server">
void Page_Load(Object Src, EventArgs E)
{
string term = Request.QueryString["q"];
if (!String.IsNullOrEmpty(term))
{
switch (term.ToLower())
{
case "nexpert":
Response.Write(@"neXpert is a add-on to Fiddler similar to the YSlow add-on that integrates
with Firebug on Firefox");
break;
case "yslow":
Response.Write(@"YSlow analyzes web pages and suggests ways to improve their performance based
on a set of rules for high performance web pages.");
break;
case "firebug":
Response.Write(@"The Firebug extension for Mozilla Firefox allows the debugging, editing, and
monitoring of any website's CSS, HTML, DOM, and JavaScript, and provides other
Web development tools.");
break;
default:
Response.Write(@"blah blah");
break;
}
}
}
</script>
Glossary.aspx is an inline .ASPX (ASP.NET 2.0) page with the HTML block removed.
In a real-life scenario, the description of a keyword passed as a querystring
value would be retrieved by querying a data source. Keyword descriptions could
be updated or new ones added and this technique can still get the freshest tooltip
content dynamically without much processing on the server side. All the major
action happens on the client-side with just a few lines of code, thanks to the
power of jQuery!
I m using jQuery plugin "jquery-1.3.2.min.js" in my solution for popup window. If I am inculding this plugin in my solution then glossary tooltip working fine in IE browser but it is not working in other browser. But if I exclude "jquery-1.3.2.min.js" then tooltip is working in Safari, Firefox and IE.
also if a term has two words or special character then this solution is not working.
Please suggest how to resolve the issue.
Thanks Furqan