How to Verify Tooltip using Playwright Java

This article will discuss how to verify the tooltip using Playwright Java.

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

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.
First, let us see how we can get the locator 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.

        Playwright playwright = Playwright.create();
        BrowserContext browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false))
                .newContext();
        
        Page page = browser.newPage();
        page.navigate("https://jqueryui.com/tooltip/");
        FrameLocator frameOne = page.frameLocator(".demo-frame");
        Locator ageBox = frameOne.locator("#age");
        Locator toolTipText = frameOne.locator(".ui-tooltip-content");
        ageBox.hover();
        String textContent = toolTipText.textContent();
        System.out.println(textContent);

First, we navigated to the site, and then as the content is inside an iFrame, we needed to handle it using the frameOne.
After, we take the age text box and the tooltip locator into a variable.
Using the variable of the textbox, we hover over it.
Then we get the text content out of it after hovering.