How to Verify Tooltip using Selenium WebDriver

Profile picture for user arilio666

This article will discuss how to verify the tooltip using Selenium.

Before moving on to the code section, we will see the tooltip.

  • A tooltip is a GUI element that displays additional information about an item when the user hovers over or clicks on it. 
  • It is typically a small rectangular box near the item containing text, images, or other content that provides context or clarification about its purpose or function. 
  • Tooltips can be found in various applications, such as web browsers, text editors, and desktop applications, and are often used to provide users with quick help or guidance on how to use the software.
  • This is actually what a tooltip looks like, and it will be displayed once the specific place is hovered upon.

Using Actions Class:

Using the action class, we will mimic the action of mouse hover and will try to verify the tooltip text present within.

    WebDriverManager.chromedriver().setup();
        ChromeDriver driver = new ChromeDriver();

        driver.get("https://jqueryui.com/tooltip/");

        driver.manage().window().maximize();

        Actions actions = new Actions(driver);

        WebDriver frameEle = driver.switchTo().frame(0);

        WebElement ageBox = frameEle.findElement(By.id("age"));
        actions.moveToElement(ageBox).build().perform();
  • Up to this point, we can hover over the age text box, and then the tooltip appears.
  • Now let us see how we can isolate the element of the tooltip.
  • Open the DOM and go to the source tab, and there we can find a pause icon that pauses the page in debugger mode.
  • Hover over the text box and pause the page.
  • Now use the element pointer and locate the element.
  • Like this, the tooltip locator can be fetched.
  • Now let us use this and verify it.

Let us verify it.


  WebDriverManager.chromedriver().setup();
        ChromeDriver driver = new ChromeDriver();

        driver.get("https://jqueryui.com/tooltip/");

        driver.manage().window().maximize();

        Actions actions = new Actions(driver);

        WebDriver frameEle = driver.switchTo().frame(0);

        WebElement ageBox = frameEle.findElement(By.id("age"));
        actions.moveToElement(ageBox).build().perform();

        WebElement tooltip = driver.findElement(By.xpath("//div[@class='ui-tooltip-content']"));

        System.out.println(tooltip.getText());

        String toolTipText = tooltip.getText();

        if (toolTipText.equalsIgnoreCase("We ask for your age only for statistical purposes.")) {
            System.out.println("Pass");
        } else {
            System.out.println("Fail");
        }

        driver.close();
              
  • So finally, the code goes like this, and with the help of a simple if else statement, we can verify the text in the tooltip.