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: