CODEWITHSUNDEEP
firefox-addontooltipxul
Ashraf Bashir
Ashraf Bashir

Reputation: 9804

Tooltips (Titles) in XUL browser content are not working?

I'm developing an extension for FireFox. I use a XUL deck element that contains a XUL browser element. Unfortunately, whenever the page displayed in the browser has an HTML title attribute, the value of this title attribute will not show up as a tooltip.

How can I get tooltips to display correctly?

Upvotes: 1

Views: 858

Answers (3)

Yaroslav Sivakov
Yaroslav Sivakov

Reputation: 480

Working example:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window id="mainWindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="NanoFL" width="800" height="600" persist="screenX screenY width height sizemode">
<script>
    <![CDATA[

    function fillTooltip(tooltip)
    {
        var nodes = document.getElementById("browser").contentWindow.document.querySelectorAll(":hover");
        for (var i=nodes.length-1; i>=0; i--)
        {
            if (nodes[i].hasAttribute("title"))
            {
                tooltip.setAttribute("label", nodes[i].getAttribute("title"));
                return true;
            }
        }
        return false;
    }

    ]]>
</script>
<browser id="browser" src="chrome://nanofl/content/index.html" flex="1" disablehistory="true" tooltip="browserTooltip" />
<tooltip id="browserTooltip" onpopupshowing="return fillTooltip(this)"/>
</window>

Upvotes: 0

Ashraf Bashir
Ashraf Bashir

Reputation: 9804

I found the solution for those who are interested, it's by adding a tooltip property to the XUL browser element with the following value:
tooltip="aHTMLTooltip"
Or adding it programmatically using javascript like this:
browser.setAttribute('tooltip','aHTMLTooltip');

for more details check: https://bugzilla.mozilla.org/show_bug.cgi?id=451792#c1

Upvotes: 1

Wladimir Palant
Wladimir Palant

Reputation: 57681

There is no mechanism to automatically display title attributes in tooltips - the browser window has special code for that and you need to replicate this code in your extension. This means that you need to define a <tooltip> element, e.g.:

<popupset>
  <tooltip id="browserTooltip" onpopupshowing="return fillTooltip(this);"/>
</popupset>

You should use this tooltip in your <browser> element, like this:

<browser tooltip="browserTooltip"/>

And you should create a fillTooltip() function that will be called whenever your tooltip shows up. It will need to look at the HTML element that the mouse pointer hovers over, check its title attribute and put the value of the attribute into the tooltip. The function performing this job in Firefox is FillInHTMLTooltip() though you might want to go with a simpler variant like this (untested code):

function fillTooltip(tooltip)
{
  // Walk up the DOM hierarchy until we find something with a title attribute 
  var node = document.tooltipNode;
  while (node && !node.hasAttribute("title"))
    node = node.parentNode;

  // Don't show tooltip if we didn't find anything
  if (!node)
    return false;

  // Fill in tooltip text and show it
  tooltip.setAttribute("label", node.getAttribute("title"));
  return true;
}

Upvotes: 1

Related Questions