How to Verify Tooltip using Playwright

A tooltip refers to a message that is displayed when a user hovers their mouse over an element, such as an icon, image, button, textbox, hyperlink, or any other similar element on a webpage or application interface.

Table of Contents

1. Demo Website
2. How to find tooltip locators
3. Verify the tooltip using the tooltip box
4. Verify the tooltip using the title attribute
5. Video Tutorial

Demo Website

For the demo, refer to the autopract tooltip example.

Once you mouse hover on Your age input box, you will see the "We ask for your age only for testing." tooltip.

How to find tooltip locators

The moment you try to inspect tooltip elements, the tooltip and its associated elements in the Document Object Model (DOM) can disappear. To access these elements, follow these steps:

Step 1: Navigate to Chrome's Source tab in the Developer Tools.

Step 2: Hover the mouse over the element to display the tooltip.

Step 3: Pause the script execution using the F8 key, or by using the Command+/ key combination on a Mac, or the Control+/ key combination on Windows.

Step 4: Once in debugging mode, click on the element inspector cursor to inspect the element.

Verify the tooltip using the tooltip box

Upon inspection, a div element will be visible in the code representing the tooltip box. Follow the steps below to verify the text content of this tooltip div:

Step 1: Hover the mouse over the age input box.

await page.locator('input#age').hover()

Step 2: Locate the tooltip div and extract the text content of the tooltip.

const tooltipTxt = await page.locator('.ui-tooltip-content').textContent()

Step 3: Verify the content of the tooltip against the expected value.

expect(tooltipTxt).toBe('We ask for your age only for testing.')

Code

test('Verify tooltip using tooltip box', async({page})=>{
    page.goto('http://autopract.com/selenium/tooltip/')

    // Hover Over age input box
    await page.locator('input#age').hover()

    // Locate tooltip div and get the tooltip text
    const tooltipTxt = await page.locator('.ui-tooltip-content').textContent()

    // Verify tooltip
    expect(tooltipTxt).toBe('We ask for your age only for testing.')
})  

Verify the tooltip using the title attribute

In addition to appearing in the tooltip div, the tooltip text may also be displayed in the title attribute of the age input box when the cursor is hovered over it. To verify the value of the title attribute, follow the steps below:

Step 1: Hover the mouse over the age input box.

await page.locator('input#age').hover()

Step 2: Move the cursor to trigger the display of the title attribute value. This is needed because, in the current example, value is generated once we move the mouse.

await page.mouse.move(0, 0);

Step 3: Extract the value of the title attribute.

const titleTxt = await page.locator('input#age').getAttribute('title')

Step 4: Verify that the value of the title attribute matches the expected value.

expect(titleTxt).toBe('We ask for your age only for testing.')

Code

test.only('Verify tooltip using title attribute', async({page})=>{
    page.goto('http://autopract.com/selenium/tooltip/')

    // Hover Over Age Input Box
    await page.locator('input#age').hover()

    // move the cursor to generate value for title attribute
    await page.mouse.move(0, 0);

    // get the title attribute value
    const titleTxt = await page.locator('input#age').getAttribute('title')

    // Verify the title attribute value
    expect(titleTxt).toBe('We ask for your age only for testing.')
})