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.
This was a problem in Tooltipster. It has been fixed in 4.1.8.