2

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: enter image description here

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

Let me know if any further details are required.

Community
  • 1
  • 1
GorvGoyl
  • 42,508
  • 29
  • 229
  • 225

1 Answers1

6

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:

browserAction button switching between two different titles

dwj
  • 3,443
  • 5
  • 35
  • 42
Makyen
  • 31,849
  • 12
  • 86
  • 121
  • how to set it on hover? is there any hover event for this? – GorvGoyl Nov 30 '16 at 07:16
  • @JerryGoyal, There is no hover event available. You just set the title, then when the mouse hovers the button, the title is displayed (just like a tooltip is displayed without you having to do anything but set it). [Here is a GIF](https://i.stack.imgur.com/BbNW4.gif) which shows a slight change in title. That GIF no longer exactly matches the code shown in [this other answer](http://stackoverflow.com/a/40604386/3773011). The code in that answer is to have buttons with multiple states. While that question is about Firefox WebExtensions, the code is tested in both Chrome and Firefox. – Makyen Nov 30 '16 at 07:30
  • but the content is changed whenever user enters something but hover shows the content which I initially set. Do i have to call setTitle each and every time? – GorvGoyl Nov 30 '16 at 08:38
  • @JerryGoyal, You have to call `browserAction.setTitle()` any time you want the title to change. I'm not sure why/how it would be any different than that. – Makyen Nov 30 '16 at 14:40