How to make a Firefox Extension URL Button show a string when hovered over

问题

I have made my full FF extension, and there is a button in the URL bar. The boss now wants the button to show a certain string when you hover over it. Here is my current code for the button:

var loadURLButton = function(doc, urlBtnClick) {
    var urlBarIcons = doc.getElementById('urlbar-icons')
    var btn = doc.createElement('toolbarbutton');
    btn.setAttribute('id', 'urlbutton');
    btn.setAttribute('image', require('sdk/self').data.url("canNone.png"));
    btn.addEventListener('command', urlBtnClick, false);
    urlBarIcons.appendChild(btn);
    return btn;
}

var doc = require('sdk/window/utils').getMostRecentBrowserWindow().document;

var urlbarButton = loadURLButton(doc, openTab);

What can I add to this in order to make some id pop up on hover?

回答1:

Awwwww man all that work for nothing. The attribute is not tooltip but it is tooltiptext! So just do btn.setAttribute('tooltiptext', 'what ever you want');

var loadURLButton = function(doc, urlBtnClick) {
    var urlBarIcons = doc.getElementById('urlbar-icons')
    var btn = doc.createElement('toolbarbutton');
    btn.setAttribute('id', 'urlbutton');
    btn.setAttribute('tooltiptext', 'mytt');
    btn.setAttribute('image', 'chrome://branding/content/icon32.png');
    btn.addEventListener('command', urlBtnClick, false);
    urlBarIcons.appendChild(btn);
    return btn;
}

var doc = document;

var urlbarButton = loadURLButton(doc, null);

回答2:

I see the issue i tried setting attribute of tooltip on it and all the anonys children and it didnt work.

So Im thinking of attachinga panel to it. This code doesnt work but we're in the right direction:

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/panel#Examples

var loadURLButton = function(doc, urlBtnClick) {
    var urlBarIcons = doc.getElementById('urlbar-icons')
    var tooltip = doc.createElement('panel');
    tooltip.setAttribute('style', 'width:100px;height:100px;background-color:red;');
    tooltip.setAttribute('id', 'mytt');
    tooltip.textContent = 'my toold tip';
    var btn = doc.createElement('toolbarbutton');
    btn.setAttribute('id', 'urlbutton');
    btn.setAttribute('tooltip', 'mytt');
    btn.setAttribute('image', 'chrome://branding/content/icon32.png');
    btn.addEventListener('command', urlBtnClick, false);
    btn.appendChild(tooltip)
    urlBarIcons.appendChild(btn);
    return btn;
}

var doc = document;

var urlbarButton = loadURLButton(doc, null);

来源：https://stackoverflow.com/questions/27320871/how-to-make-a-firefox-extension-url-button-show-a-string-when-hovered-over