Search code examples
jquerytooltipster

XML namespace breaks tooltipster with XHTML

This jQuery tooltipster in a .XHTML file works fine

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:t="http://www.tei-c.org/ns/1.0" >
<head>
<title>Sandbox</title>
        <link rel="stylesheet" type="text/css" href="tooltipster.bundle.css" />
        <link rel="stylesheet" type="text/css" href="tooltipster-sideTip-light.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script type="text/javascript" src="tooltipster.bundle.min.js"></script>
        <script>$(document).ready(function() {
            $('.tooltip').tooltipster({ 
                functionInit: function(instance, helper) {
                    var content = $(helper.origin).children().detach();
                    instance.content(content);              
                }
            })
        });</script>
</head>
<body>

<span class="tooltip">Hover here.
    <p>Red</p>
    <p>Green</p>
    <p>Blue</p>
</span>

</body>
</html>

until I add <t:body></t:body> inside the HTML body, after the </span>. The tooltip appears on hover but then won’t disappear.

That <t:body> should not matter. The t:body is in a different namespace! (It shouldn’t matter, right?)

The problem goes away if I change t:body to t:bod or if I change the file name from .xhtml to .html. (I’m using an Abyss web server.)

What is going on? How can I make this work? This app makes extensive use of namespaces in the XHTML, and namespaced elements -- like <body> -- that have a meaning in the HTML namespace.

Solution

  • This was a problem in Tooltipster. It has been fixed in 4.1.8.