#javascript #html #canvas #fabricjs #tippyjs
#javascript #HTML #холст #fabricjs #tippyjs
Вопрос:
У меня есть несколько кругов, которые можно добавить на холст fabricjs. Каждый круг является объектом, в то время как вне моего кода javascript у меня есть элемент DOM, который выглядит следующим образом:
<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;z-index:9999999;position:absolute;cursor:pointer;">
<div class="tooltipcontent darktext tooltippadding" style="position:relative;">
Testtest
</div>
</span>
Этот элемент запускает всплывающую подсказку с помощью Tippjs (пакет всплывающих подсказок js), который содержит следующий код (не обращайте внимания на каждый цикл, я также должен упомянуть, что приведенный ниже код находится вне функции canvas):
$( "#cirkel1" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
Внутри моей функции, где я объявляю все для canvas, у меня есть следующий код для размещения элемента DOM поверх объекта canvas:
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left this._offset.left,
top: object.top this._offset.top
};
}
var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;
function positionBtn(obj) {
var absCoords = canvas.getAbsoluteCoords(obj);
cirkel1tooltip.style.left = (absCoords.left - btnWidth / 10) 'px';
cirkel1tooltip.style.top = (absCoords.top - btnHeight / 10) 'px';
}
Это работает, и при нажатии отображается всплывающая подсказка, но в моей функции canvas у меня также есть функция щелчка, которая переключает изображение для определенного круга при нажатии. Мне нужно, чтобы оба запускались одновременно при щелчке по кругу, теперь, когда я нажимаю на круг, появляется изображение, но только после того, как я щелкну второй раз, всплывающая подсказка тоже появляется, а не при том же первом щелчке.
Удаление изображения щелчком во второй раз также не работает, пока я не нажму на другой круг, а затем снова нажму на ранее нажатый круг.
Странно то, что когда я удаляю одну из двух функций (щелчок по подсказке или щелчок по переключению изображения), она работает мгновенно, но вместе сразу работает только переключение изображения, а всплывающая подсказка только после второго щелчка. Почему это так?
Весь код можно увидеть здесь (щелкните маленькие кружочки для проверки): https://codepen.io/twan2020/pen/jOVaWMm
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<base href="//printzelf.nl/new/">
<title>Image test</title>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<style media="screen">
.tippy-box {
width: 100%!important;
text-align: center;
background-color: #fff!important;
color: #fff!important;
box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
}
.darktext {
color: #383838;
font-family: Panton;
font-size: 15px;
}
.tooltippadding {
padding: 15px;
}
body .tippy-arrow {
color: #fff!important;
}
</style>
<img id="background" src="https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg" alt="" style="display:none;">
<div class="canvas-container" style="width: 600px; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="600" height="500" class="lower-canvas" style="border:1px solid red;position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>
</body>
<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;z-index:9999999;position:absolute;cursor:pointer;">
<div class="tooltipcontent darktext tooltippadding" style="position:relative;">
Testtest
</div>
</span>
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script type="text/javascript" src="assets/js/fabric.js"></script>
<script type="text/javascript">
(function() {
var myImg = document.querySelector("#background");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
var source = document.getElementById('background').src;
var canvas = new fabric.Canvas('c');
canvas.hoverCursor = 'pointer';
canvas.selection = false;
canvas.setDimensions({ width: realWidth, height: realHeight });
var img = new Image();
// use a load callback to add image to canvas.
img.src = 'https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg';
canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
const hotspots = [
{
top: 140,
left: 230,
radius: 10,
fill: '#009fe3',
id: 'cirkel1',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 300,
imgheight: 200,
imgwidth: 200,
tooltipid: 'cirkel1',
imgUrl: 'https://printzelf.nl/new/assets/images/logo_gewoon.png'
},
{
top: 240,
left: 530,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 700,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
},
{
top: 240,
left: 730,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 800,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i.guim.co.uk/img/media/fe1e34da640c5c56ed16f76ce6f994fa9343d09d/0_174_3408_2046/master/3408.jpg?width=1200amp;height=900amp;quality=85amp;auto=formatamp;fit=cropamp;s=0d3f33fb6aa6e0154b7713a00454c83d'
}
];
const loadedImages = [];
for (let [idx, props] of hotspots.entries()) {
let c = new fabric.Circle(props);
c.class = 'hotspot';
c.name = 'hotspot-' idx;
canvas.add(c);
}
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left this._offset.left,
top: object.top this._offset.top
};
}
var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;
function positionBtn(obj) {
var absCoords = canvas.getAbsoluteCoords(obj);
cirkel1tooltip.style.left = (absCoords.left - btnWidth / 10) 'px';
cirkel1tooltip.style.top = (absCoords.top - btnHeight / 10) 'px';
}
for (const ho of canvas.getObjects()) {
// check for 'hotspot' class
if (ho.class amp;amp; ho.class === 'hotspot') {
ho.on('mousedown', () => {
// check if image was previously loaded
if (loadedImages.indexOf(ho.name) < 0) {
// image is not in the array
// so it needs to be loaded
// prepare the image properties
let imgProps = {
width: ho.imgwidth,
height: ho.imgheight,
left: ho.imgleft,
top: ho.imgtop,
scaleX: .25,
scaleY: .25,
selectable: false,
id: 'img-' ho.name,
hoverCursor: "default"
};
var printzelfImg = new Image();
printzelfImg.onload = function (img) {
var printzelf = new fabric.Image(printzelfImg, imgProps);
canvas.add(printzelf);
};
printzelfImg.src = ho.imgUrl;
// update the `loadedImages` array
loadedImages.push(ho.name);
} else {
// image was previously loaded
for (const o of canvas.getObjects()) {
// find the correct image on the canvas
if (o.id amp;amp; o.id === 'img-' ho.name) {
// toggle the visible property
o.visible = !o.visible;
break;
}
}
}
positionBtn(ho);
});
}
}
})();
$( "#cirkel1" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
</script>
</html> Кроме того, можно ли прикреплять разные всплывающие подсказки к каждой точке / кругу?
Комментарии:
1. Не могли бы вы создать рабочий фрагмент, чтобы мы могли видеть проблему?
2. @AHaworth Я добавил фрагмент. Как вы можете видеть, изображение появляется после щелчка по небольшому кругу, но без всплывающей подсказки, только после второго щелчка, и при втором щелчке изображение снова не удаляется, только после того, как вы нажмете другой круг, а затем снова щелкните предыдущий.
3. Привет, ничего не происходит, когда я захожу в codepen и нажимаю на синий круг.
4. @AHaworth Это только маленькие круги, большие круги являются частью изображения.
5. @AHaworth Я выбрал другое фоновое изображение, чтобы сделать его более четким.
Ответ №1:
Причина, по которой это не сработало, заключается в том, что у вас есть только 1 точка доступа DIV, и вы перемещаете эту точку доступа при наведении курсора мыши и ожидаете, что после этого она вызовет событие onclick, которое не работает. Причина, по которой он работает при втором щелчке, заключается в том, что точка доступа теперь там.
Решение состоит в том, чтобы иметь тот же объем DIV, что и у вас hotspot. Это позволяет вам иметь уникальное всплывающее сообщение. В настоящее время он отображает одно и то же сообщение для каждой точки доступа.
Для свойства tippy есть OnShow(экземпляр) и onHide (экземпляр), которые позволяют выполнять дополнительные функции при нажатии на эти точки доступа. В вашем случае вы хотите загрузить изображения, связанные с выбранной точкой доступа. Это исключает установку двух событий.
Также была проблема с переключением изображений. Я исправил это, но я не уверен на 100%, что он работает так, как вы хотели бы, чтобы это работало.
Кроме того, у вас были HTML-теги вне тега <body>, а содержимое HTML не должно существовать вне body .
Я сохранил большую часть вашего исходного кода, насколько смог.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<base href="//printzelf.nl/new/">
<title>Image test</title>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<style media="screen">
.tippy-box {
width: 100%!important;
text-align: center;
background-color: #fff!important;
color: #fff!important;
box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
}
.darktext {
color: #383838;
font-family: Panton;
font-size: 15px;
}
.tooltippadding {
padding: 15px;
}
body .tippy-arrow {
color: #fff!important;
}
</style>
</head>
<body>
<img id="background" src="https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg" alt="" style="display:none;">
<div class="canvas-container" style="width: 600px; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="600" height="500" class="lower-canvas" style="border:1px solid red;position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>
<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontent1 tooltipcontent darktext tooltippadding" style="position:relative;">
Message 1
</div>
</span>
<span id="cirkel2" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontent2 tooltipcontent darktext tooltippadding" style="position:relative;">
Message 2
</div>
</span>
<span id="cirkel3" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontent3 tooltipcontent darktext tooltippadding" style="position:relative;">
Message 3
</div>
</span>
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script type="text/javascript" src="assets/js/fabric.js"></script>
<script type="text/javascript">
(function() {
var myImg = document.querySelector("#background");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
var source = document.getElementById('background').src;
var canvas = new fabric.Canvas('c');
canvas.hoverCursor = 'pointer';
canvas.selection = false;
canvas.setDimensions({ width: realWidth, height: realHeight });
var img = new Image();
// use a load callback to add image to canvas.
img.src = 'https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg';
canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
const hotspots = [
{
top: 140,
left: 230,
radius: 10,
fill: '#009fe3',
id: 'cirkel1',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 300,
imgheight: 200,
imgwidth: 200,
tooltipid: 'cirkel1',
imgUrl: 'https://printzelf.nl/new/assets/images/logo_gewoon.png'
},
{
top: 240,
left: 530,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 700,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
},
{
top: 240,
left: 730,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 800,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i.guim.co.uk/img/media/fe1e34da640c5c56ed16f76ce6f994fa9343d09d/0_174_3408_2046/master/3408.jpg?width=1200amp;height=900amp;quality=85amp;auto=formatamp;fit=cropamp;s=0d3f33fb6aa6e0154b7713a00454c83d'
}
];
const loadedImages = [];
for (let [idx, props] of hotspots.entries()) {
let c = new fabric.Circle(props);
c.class = 'hotspot';
c.name = 'hotspot-' idx;
canvas.add(c);
}
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left this._offset.left,
top: object.top this._offset.top
};
}
var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;
function positionBtn(obj, index) {
var absCoords = canvas.getAbsoluteCoords(obj);
var element = document.getElementById('cirkel' index);
element.style.left = (absCoords.left - btnWidth / 10) 'px';
element.style.top = (absCoords.top - btnHeight / 10) 'px';
}
canvas.getObjects().forEach(function(ho, index) {
positionBtn(ho, index 1);
});
$( ".carttip" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
onShow(instance) {
canvas.getObjects().forEach(function(ho, index) {
if (ho.class amp;amp; ho.class === 'hotspot') {
if (instance.id == index 1) {
// check if image was previously loaded
if (loadedImages.indexOf(ho.name) < 0) {
// image is not in the array
// so it needs to be loaded
// prepare the image properties
let imgProps = {
width: ho.imgwidth,
height: ho.imgheight,
left: ho.imgleft,
top: ho.imgtop,
scaleX: .25,
scaleY: .25,
selectable: false,
id: 'img-' ho.name,
hoverCursor: "default",
};
var printzelfImg = new Image();
printzelfImg.onload = function (img) {
var printzelf = new fabric.Image(printzelfImg, imgProps);
printzelf.trippyHotspotImage = true;
canvas.add(printzelf);
};
printzelfImg.src = ho.imgUrl;
// update the `loadedImages` array
loadedImages.push(ho.name);
} else {
for (const o of canvas.getObjects()) {
if (o.id amp;amp; o.id === 'img-' ho.name) {
o.visible = true;
break;
}
}
canvas.renderAll();
}
}
}
});
},
onHide(instance) {
for (const o of canvas.getObjects()) {
if (o.trippyHotspotImage) {
o.visible = false;
}
}
canvas.renderAll();
},
content: function (reference) {
return reference.querySelector('.tooltipcontent' (i 1));
}
});
});
})();
</script>
</body>
</html> Ответ №2:
Похоже click , что в первый раз событие не запускается сразу после mousedown первого. Используемая вами структура, похоже, предотвращает это, потому что выполняется процесс (слушателем).
(Это может быть связано с распространением событий, но на данный момент я все еще не выяснил, как предотвратить click запуск события после a mouseup .)
Что я бы назвал обходным путем: чтобы отобразить всплывающую подсказку в том же щелчке, то есть mousedown событие, за которым следует mouseup единица, вы можете установить mouseup значение для trigger свойства, которое отображает всплывающую подсказку:
$( "#cirkel1" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'mouseup', /* <-- here */
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
mouseup Событие будет запущено, если mousedown оно произошло на круге.
Рабочий фрагмент.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<base href="//printzelf.nl/new/">
<title>Image test</title>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<style media="screen">
.tippy-box {
width: 100%!important;
text-align: center;
background-color: #fff!important;
color: #fff!important;
box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
}
.darktext {
color: #383838;
font-family: Panton;
font-size: 15px;
}
.tooltippadding {
padding: 15px;
}
body .tippy-arrow {
color: #fff!important;
}
</style>
<img id="background" src="https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg" alt="" style="display:none;">
<div class="canvas-container" style="width: 600px; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="600" height="500" class="lower-canvas" style="border:1px solid red;position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>
</body>
<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;z-index:9999999;position:absolute;cursor:pointer;">
<div class="tooltipcontent darktext tooltippadding" style="position:relative;">
Testtest
</div>
</span>
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script type="text/javascript" src="assets/js/fabric.js"></script>
<script type="text/javascript">
(function() {
var myImg = document.querySelector("#background");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
var source = document.getElementById('background').src;
var canvas = new fabric.Canvas('c');
canvas.hoverCursor = 'pointer';
canvas.selection = false;
canvas.setDimensions({ width: realWidth, height: realHeight });
var img = new Image();
// use a load callback to add image to canvas.
img.src = 'https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg';
canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
const hotspots = [
{
top: 140,
left: 230,
radius: 10,
fill: '#009fe3',
id: 'cirkel1',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 300,
imgheight: 200,
imgwidth: 200,
tooltipid: 'cirkel1',
imgUrl: 'https://printzelf.nl/new/assets/images/logo_gewoon.png'
},
{
top: 240,
left: 530,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 700,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
},
{
top: 240,
left: 730,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 800,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i.guim.co.uk/img/media/fe1e34da640c5c56ed16f76ce6f994fa9343d09d/0_174_3408_2046/master/3408.jpg?width=1200amp;height=900amp;quality=85amp;auto=formatamp;fit=cropamp;s=0d3f33fb6aa6e0154b7713a00454c83d'
}
];
const loadedImages = [];
for (let [idx, props] of hotspots.entries()) {
let c = new fabric.Circle(props);
c.class = 'hotspot';
c.name = 'hotspot-' idx;
canvas.add(c);
}
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left this._offset.left,
top: object.top this._offset.top
};
}
var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;
function positionBtn(obj) {
var absCoords = canvas.getAbsoluteCoords(obj);
cirkel1tooltip.style.left = (absCoords.left - btnWidth / 10) 'px';
cirkel1tooltip.style.top = (absCoords.top - btnHeight / 10) 'px';
}
for (const ho of canvas.getObjects()) {
// check for 'hotspot' class
if (ho.class amp;amp; ho.class === 'hotspot') {
ho.on('mousedown', () => {
// check if image was previously loaded
if (loadedImages.indexOf(ho.name) < 0) {
// image is not in the array
// so it needs to be loaded
// prepare the image properties
let imgProps = {
width: ho.imgwidth,
height: ho.imgheight,
left: ho.imgleft,
top: ho.imgtop,
scaleX: .25,
scaleY: .25,
selectable: false,
id: 'img-' ho.name,
hoverCursor: "default"
};
var printzelfImg = new Image();
printzelfImg.onload = function (img) {
var printzelf = new fabric.Image(printzelfImg, imgProps);
canvas.add(printzelf);
};
printzelfImg.src = ho.imgUrl;
// update the `loadedImages` array
loadedImages.push(ho.name);
} else {
// image was previously loaded
for (const o of canvas.getObjects()) {
// find the correct image on the canvas
if (o.id amp;amp; o.id === 'img-' ho.name) {
// toggle the visible property
o.visible = !o.visible;
break;
}
}
}
positionBtn(ho);
});
}
}
})();
$( "#cirkel1" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'mouseup',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
</script>
</html>