Showing Tooltip On Selected Text In Drop-down Using JavaScript

In this blog, I will show you how to add a tooltip for the drop-down selected text on a mouseover event.

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.

 

 

Step 2 - Add a drop-down list

 

In WebForm1.aspx, add a div with DropdownList as shown below.

<asp:DropDownListID="ddlFilterRegion"runat="server" DataTextField="RegionName"DataValueField="RegionID">
</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.

 

public partial class WebForm1: System.Web.UI.Page {
    DataSet ds = new DataSet();
    protected void Page_Load(object sender, EventArgs e) {
        string strconn = ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString;
        using(SqlConnection conn = new SqlConnection(strconn)) {
            conn.Open();
            //create a table Regions in your DataBase having columns and bind dropdownlist with that data
            //[RegionID][int] IDENTITY(1,1) NOT NULL,[RegionName] [varchar] (20) NULL, [RegionOrder] [int] NULL, PRIMARY KEY on RegionID
            SqlDataAdapter da = new SqlDataAdapter("select * from Regions", conn);
            da.Fill(ds);
            ddlFilterRegion.DataSource = ds;
            ddlFilterRegion.DataBind();
        }
    }
}

Step 4 - Run the application

 

The drop-down is filled with values in your database.

 

 

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.

 

 

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.

 

 

 

The drop-down list in DOM Explorer is displayed using the “Select” element and the values inside this list are shown as “Options”.

 

 

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. 

 

<script type="text/javascript">
    function ddlToolTipsRegion(ddlRegion) {
        if (ddlRegion.value == 0) {
            ddlRegion.title = "";
        } else {
            ddlRegion.title = "Selected Region is : " + ddlRegion.options[ddlRegion.selectedIndex].text;
        }
    }
</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.

ddlRegion.Options[ddlRegion.selectedIndex]

Step 6

 

Add an “onmouseover" event for the drop-down list and call this function.

 

 

<form id="form1" runat="server">
    <div class="center">
        <table>
            <tr>
                <td>Regions: </td>
                <td>
                    <asp:DropDownList ID="ddlFilterRegion" DataTextField="RegionName" DataValueField="RegionID" runat="server" onmouseover="ddlToolTipsRegion(this);"></asp:DropDownList>
                </td>
            </tr>
        </table>
    </div>
</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.

 

 

 

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.

 

 

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.