Showing Tooltip On Selected Text In Drop-down Using JavaScript

Introduction

 
In this blog, we will learn how to add a tooltip for a drop-down selected text on the mouseover event.
 
By setting the Title attribute for a control/element, we can show the tooltip or any additional information for that control. Here, I’ll take an example of the drop-down list.
 
Let’s get started.
 
Step 1 - Create an empty web application.
 
An example is shown below.
 
Show Tooltip For Dropdown Selected Text Using JavaScript
 
Step 2 - Add a drop-down list
 
In WebForm1.aspx, add a div with DropdownList as shown below.
  1. <asp:DropDownListID="ddlFilterRegion"runat="server" DataTextField="RegionName"DataValueField="RegionID">  
  2. </asp:DropDownList>  
Step 3 - Fill this drop-down list with data
 
You can create a table and bind with the data in the code-behind file, as shown below.
 
Show Tooltip For Dropdown Selected Text Using JavaScript
  1. public partial class WebForm1: System.Web.UI.Page {  
  2.     DataSet ds = new DataSet();  
  3.     protected void Page_Load(object sender, EventArgs e) {  
  4.         string strconn = ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString;  
  5.         using(SqlConnection conn = new SqlConnection(strconn)) {  
  6.             conn.Open();  
  7.             //create a table Regions in your DataBase having columns and bind dropdownlist with that data  
  8.             //[RegionID][int] IDENTITY(1,1) NOT NULL,[RegionName] [varchar] (20) NULL, [RegionOrder] [int] NULL, PRIMARY KEY on RegionID   
  9.             SqlDataAdapter da = new SqlDataAdapter("select * from Regions", conn);  
  10.             da.Fill(ds);  
  11.             ddlFilterRegion.DataSource = ds;  
  12.             ddlFilterRegion.DataBind();  
  13.         }  
  14.     }  
  15. }  
Step 4 - Run the application
 
The drop-down is filled with values in your database.
 
Show Tooltip For Dropdown Selected Text Using JavaScript
 
Now, press F12 [or right-click on the page and select “Inspect element”]. The DOM Explorer opens, as shown below. Let us now analyze the DOM Explorer.
 
Show Tooltip For Dropdown Selected Text Using JavaScript
 
In order to see how the drop-down looks in DOM [Document Object Model] Explorer, select the element and click on the drop-down list as shown below.
 
Show Tooltip For Dropdown Selected Text Using JavaScript 
 
The drop-down list in DOM Explorer is displayed using the “Select” element and the values inside this list are shown as “Options”.
 
Show Tooltip For Dropdown Selected Text Using JavaScript
 
So, in order to show the selected text, we have to find out which option value is selected. In the next section, we will see how to do that with a JavaScript function.
 
Step 5 - Add JavaScript Code
 
In the source file, add a script tag and create a function to add the Title attribute for the drop-down list. Then, set which option is selected and set the text. 
 
Show Tooltip For Dropdown Selected Text Using JavaScript
  1. <script type="text/javascript">  
  2.     function ddlToolTipsRegion(ddlRegion) {  
  3.         if (ddlRegion.value == 0) {  
  4.             ddlRegion.title = "";  
  5.         } else {  
  6.             ddlRegion.title = "Selected Region is : " + ddlRegion.options[ddlRegion.selectedIndex].text;  
  7.         }  
  8.     }  
  9. </script> 
To set the “Title" attribute for the dropdown’s selected text, we have to first find out which option is selected, as shown in the example in the above function.
  1. ddlRegion.Options[ddlRegion.selectedIndex]  
Step 6
 
Add an “onmouseover" event for the drop-down list and call this function.
 
Show Tooltip For Dropdown Selected Text Using JavaScript 
  1. <form id="form1" runat="server">  
  2.     <div class="center">  
  3.         <table>  
  4.             <tr>  
  5.                 <td>Regions: </td>  
  6.                 <td>  
  7.                     <asp:DropDownList ID="ddlFilterRegion" DataTextField="RegionName" DataValueField="RegionID" runat="server" onmouseover="ddlToolTipsRegion(this);"></asp:DropDownList>  
  8.                 </td>  
  9.             </tr>  
  10.         </table>  
  11.     </div>  
  12. </form>  
So, when you hover the mouse on the drop-down list, it will show the selected value for the drop-down list as a tooltip.
 
Step 7 - Run the application again and hover the mouse on the drop-down list 
 
A tooltip for the selected item appears as below.
 
 Show Tooltip For Dropdown Selected Text Using JavaScript
 

Summary

 
To sum up, in order to show a tooltip ‘onmouseover’ event of any control using JavaScript, we need to set the “title” attribute of the control. For example, here in this article, we used a drop-down list and set the title attribute to show the tooltip for the selected text.
 
Show Tooltip For Dropdown Selected Text Using JavaScript 
  1. ddlRegion.title = "Selected Region is : " + ddlRegion.options[ddlRegion.selectedIndex].text;  
Also, we saw how to inspect an element using the F12 option in the developer tool.

Next Recommended Reading Hide and Show DIV using JavaScript