Handling Bootstrap Tooltips In Selenium Webdriver

Hello Folks,

In this post, we will learn:

  • What is tooltip?
  • How to create a bootstarp tooltip?
  • how to handle bootstrap tool tip in selenium webdriver?

What is Tooltip?

Tooltip is an information about some web element which appears when user moves cursor on that web element if tool tip is assigned to that web element. It helps user to understand meaning of web element. For example: There is a registration form and it contains some fields. User who has idea about all fields , they can fill it easily. For user who has no idea of every fields, they can mouse hover on element and see information about particular fields. [Note: Developer needs to provide tooltip.]

We can create tooltips using CSS, bootstrap, JQuery etc. In this post we will learn how can we handle bootstarp tool tip in selenium webdriver.

Scenario to be automated:

Out task is to fetch the text from tool tip and print. Once you fetch, you can do whatever validation you desire.

How to create a tooltip using bootstrap:

Refer below link to create a bootstarp tooltip:

Bootstrap Tooltip

Save below code with .html extension.

When we open above file in a browser it will look like as below:

Logic to handle toolttip:

  • Tooltip appears when user moves cursor on the web element.
  • Tooltip is also a web element which is inspectable.
  • Since, tooltip appears when we mouse hover, we can inspect it on appearance. Problem is that as soon as you move cursor out of web element, tooltip will be invisible. To inspect tooltip , follow below steps:

1. Mouse hover on web element which has tool tip till tooltip appears on screen.
2. Press F8 or Fn+F8(As per your system). It will pause the UI with tooltip visible.
3. Now click on inspector icon and drop on tooltip. You will get html code for tool tip element. See picture below:

 

  • To move cursor over element to make tooltip visible, we will use Actions class and its methods.
  • Once we mouse hove on element, after some seconds/milliseconds (depends) tooltip will be visible.
  • So, we need to use explicit wait here to make webdriver wait till tooltip is visible.
  • Once tooltip is visible, we will use getText() method to fetch tooltip text.

Java Code:

Page Object class:

Test script to find tool tip:

Output:

If you have any doubt, feel free to ask here.

If you like my posts, please like, comment, share and subscribe.

#ThanksForReading

#HappySelenium

4 thoughts on “Handling Bootstrap Tooltips In Selenium Webdriver

  1. Observation :- If you have clicked anywhere on the actual page F8 will do nothing. Your last click needs to be somewhere in the inspector, like the sources tab

  2. It worked …First navigate to source tab of chrome inspector and click (fn+f8),then navigate to Element tab in Inspector and then find tool tip.(Chrome).

Leave a Reply to Mayank Cancel reply

Your email address will not be published. Required fields are marked *