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

Question

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 cod

Answer 1

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);