Generate Dynamic Tooltips with ASP.NET & jQuery
Let's say you have to scan a web page to find words matching those in a Glossary (that is continuously updated to provide descriptions for keywords), highlight them and show a brief explanation of the term as a tooltip when the mouse hovers over it. I wrote an article recently that shows how to accomplish this requirement using jQuery functions and a jQuery Plugin called SearchHighlight.
The job of scanning a web page to find words matching those in a Glossary and highlighting them is done by the jQuery SearchHighlight Plugin. 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 that SPAN tag's TITLE attribute is used. The content for the TITLE attribute is 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 so that it returns just the description of a keyword which is provided to it as a querystring value. jQuery makes DOM manipulation & AJAX interaction simple and keeps the code short. You can first run the no-frills sample and hover over the highlighted word to see the dynamic tooltip before browsing through the article.
Related:
Infinite Scrolling or Continuous Scrolling UI Pattern using ASP.NET & jQuery
Generate Dynamic Tooltips with ASP.NET & jQuery
The job of scanning a web page to find words matching those in a Glossary and highlighting them is done by the jQuery SearchHighlight Plugin. 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 that SPAN tag's TITLE attribute is used. The content for the TITLE attribute is 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 so that it returns just the description of a keyword which is provided to it as a querystring value. jQuery makes DOM manipulation & AJAX interaction simple and keeps the code short. You can first run the no-frills sample and hover over the highlighted word to see the dynamic tooltip before browsing through the article.
Related:
Infinite Scrolling or Continuous Scrolling UI Pattern using ASP.NET & jQuery
Generate Dynamic Tooltips with ASP.NET & jQuery
Comments
Post a Comment