tippy.js: новая подсказка иногда пересекается со старой
Подобные вопросы уже задавались, но я пока не нашел ответа. Я попробовал несколько подсказок, и у меня было несколько проблем. Я все еще новичок в этом Javascript/css/html,
Попытка tippy.js на данный момент и найти это легко реализовать простую подсказку. Но по какой-то причине он запоминает старую подсказку, а затем накладывает новую всплывающую подсказку поверх старой. Я также добавил tippy.js флаг "dynamicTitle: true" но это не решило проблемы.
Код ниже является примером кода, который иллюстрирует проблему. При наведении мыши появляется всплывающая подсказка. Mouseout случайным образом меняет текст подсказки. При наведении курсора мыши на ячейки в какой-то момент вы увидите, что текст всплывающей подсказки перекрывается.
Как мне избежать этого?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tooltip testing</title>
<style>
.class2 {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
text-align: center;
font-size: 36px;
font-family: "Lucida Console", Monaco, monospace;
}
.class1 {
background-color: rgb(200, 100, 200);
color: rgb(255, 255, 255);
text-align: center;
font-size: 36px;
font-family: "Lucida Console", Monaco, monospace;
}
table {
border-spacing: 1px;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td {
cursor: pointer;
padding: 10px;
position: relative;
}
</style>
<script src="https://unpkg.com/tippy.js@2.1.1/dist/tippy.all.min.js"></script>
</head>
<body id="HTMLBody">
<script>
function rearrangeStatus() {
// set status of cell
cnt = 0;
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 7; j++) {
var id = "" + cnt;
var rr = Math.random();
//console.log(rr);
if (rr > 0.5) {
document.getElementById(id).setAttribute("status", "occupied");
}
else {
document.getElementById(id).setAttribute("status", "free")
}
cnt++;
}
}
}
function functionMouseOver(id) {
var stat = document.getElementById(id).getAttribute("status");
if (stat == "occupied") {
var text = "!!!!! It is !!!! occupied !!!!!";
}
if (stat == "free") {
var text = "It is free";
}
document.getElementById(id).setAttribute("title", text);
}
function functionMouseOut(id) {
document.getElementById(id).setAttribute("title", "");
}
// create HTML Table body
titlenames = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
var HTMLTableBody = "";
HTMLTableBody += "<div class='tst'><table id='id1' style='width:40%'>";
HTMLTableBody += "<tr>";
for (var i = 0; i < 7; i++) {
HTMLTableBody += "<th id='th" + i + "' class='class1'>" + titlenames[i] + "</th>";
}
HTMLTableBody += "</tr>";
var cnt = 0;
for (var i = 0; i < 4; i++) {
HTMLTableBody += "<tr>";
for (var j = 0; j < 7; j++) {
idstr = "" + cnt;
HTMLTableBody += '<td id="' + idstr + '"' + ' class="class2"'
+ ' title=' + '"text12345"'
+ "></td > ";
cnt++;
}
HTMLTableBody += "</tr>";
}
HTMLTableBody += "</table></div>";
document.getElementById("HTMLBody").innerHTML = "" + HTMLTableBody;
// fill table with data
cnt = 0;
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 7; j++) {
var id = "" + cnt;
document.getElementById(id).innerHTML = cnt;
cnt++;
}
}
// set status of cell
cnt = 0;
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 7; j++) {
var id = "" + cnt;
if (cnt < 10) {
document.getElementById(id).setAttribute("status", "occupied");
}
else {
document.getElementById(id).setAttribute("status", "free")
}
cnt++;
}
}
</script>
<script>
function handleTippy(lastClass, lastID) {
var tt = "." + lastClass;
var rr = "'#" + lastID + "'";
//console.log(tt);
tippy(tt, {
placement: 'bottom',
animation: 'scale',
arrow: true,
arrowType: 'sharp',
size: 'large',
maxWidth: '10000px'
})
}
var table = document.getElementById("HTMLBody");
var lastID = null;
table.addEventListener("mouseover", function (e) {
if (e.target && e.target.nodeName == "TD") {
var target = e.target || e.srcElement;
lastID = target.id;
lastClass = target.className;
functionMouseOver(lastID);
handleTippy(lastClass, lastID);
}
});
var table = document.getElementById("HTMLBody");
var lastID = null;
table.addEventListener("mouseout", function (e) {
if (e.target && e.target.nodeName == "TD") {
var target = e.target || e.srcElement;
lastID = target.id;
functionMouseOut(lastID);
rearrangeStatus();
}
});
</script>
</body>
</html>