Chrome Extension – show dynamic text on mouse hover over extension icon

I’ve recently built a popup chrome extension(Popup Notes) It basically takes notes of whatever you type in popup.

Now I want to show saved notes whenever I hover my mouse over the extension icon. Right now it shows the static default title on mouse hover.

I know it’s possible because this extension Checker Plus for Gmail shows the unread emails content on mouse hover and I’m not able to figure out how.

See Image:

So, How Can I show popup content on hovering mouse over icon in chrome extension?

Let me know if any further details are required.

Answer

For manifest V2 or earlier: chrome.browserAction.setTitle

For Manifest V3: Use chrome.action.setTitle

The tooltip which is shown on hover for your browserAction button is the title. You can change the title using chrome.browserAction.setTitle().

For example:

chrome.browserAction.setTitle({
    title:'This is the tooltip text upon mouse hover.'
});

browserAction.setTitle() can also take an optional tabId which will change the title only for the specified tab.

Here is a GIF of a browserAction button switching between two different titles: