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.

Dynamic Tooltip
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

Popular posts from this blog

GitHub Copilot Q&A - 1

Image
Key takeaways from the talk in Q&A format - What is GitHub Copilot and how does it work? GitHub Copilot is a suite of tools designed for code completion. It works by analysing the code and comments you type in your IDE and sending that context to GitHub. Copilot then uses OpenAI's language model (in December 2024, it is GPT 4o by default and you can also choose the preview versions of o1-mini & o1-preview if you like) to understand your intent and generate suggestions for code completion. You can then accept, reject, or modify these suggestions. What context does GitHub Copilot consider when making suggestions? Copilot considers the entirety of the file you are currently working on, not just the code from your cursor position upwards. It also analyses the content of other open tabs in your IDE, starting with those closest to the current tab. This helps Copilot focus on the most relevant information. Is it necessary to meticulously manage open tabs for Copilot to work effect...
Read more

Maven Crash Course - Learn Power Query, Power Pivot & DAX in 15 Minutes

Image
In the Maven Crash Course " Learn Power Query, Power Pivot & DAX in 15 Minutes ", Chris Dutton walks through a hypothetical business case while showcasing the power of modern Excel tools like Power Query, Power Pivot and DAX. Power Query is used to extract, transform, and load data from external sources like SQL databases, PDF and CSV files. A relational model is created to join the tables without writing a single formula. Exploratory analysis is done using Power Pivot and Data Analysis Expressions (DAX). Data Analysis Expressions is the language that we can use to define new calculated columns and measures to enhance our Data Model instead of the traditional cell formulas that we'd typically use if our data was stored in worksheets. Pivot Charts and slicers are used to design a simple interactive report that the sales managers can use to analyze revenue trends and product performance.
Read more

"Data Prep & Exploratory Data Analysis" course by Maven Analytics

Image
The Maven Analytics course on " Data Prep & Exploratory Data Analysis " by Alice Zhao is a beginner-friendly introduction to machine learning with Python. It covers the key steps of the data science workflow, including: Gathering Data Scoping a Project Modeling Data Sharing Insights Cleaning Data Exploring Data Modeling Data  Sharing Insights The presentation deck which is available as a download crisply summarizes the essential details and is a great reference to keep going back to. The course is well-suited for aspiring data scientists looking to get hands-on experience with the data prep and EDA stages of the machine learning workflow using Python and Jupyter Notebook. 
Read more