Сделайте подъему внедрению/интерактивное ⇐ Javascript

[Anonymous]

У меня есть компонент подсказки, который использует JavaScript для прикрепления MouseOver ,

Код: Выделить всё

mouseout

Слушатели событий к элементу и на Mouseover создают компонент подсказки инструментов. Я хотел бы сделать свои подсказки интерактивными/вводимыми, так что, если пользователь перемещает мышь в сторону/в саму всплеск инструментов, когда показывает, подсказка остается заметной и позволяет взаимодействовать мыши. Как это предотвратить? Есть ли способ расширить границы элемента невидимо для включения подсказки инструментов, так что Mouseout запускается только в том случае, если мышь отодвинут от как родительского элемента , так и подсказка?

Код: Выделить всё

My visible text
< /code>

  export const attachTooltip = (node,options) => {
if (options) {

let _component

node.addEventListener('mouseover',addTooltip)
node.addEventListener('mouseout',removeTooltip)

function addTooltip(e) {
const {component, ...otherOpts} = options

_component = new component({
target: node,
props: {
mouseEvent: e,
...otherOpts
}
})
}

function removeTooltip(e) {
_component.$destroy()
}

return {
destroy() {
node.removeEventListener('mouseover',addTooltip)
node.removeEventListener('mouseout',removeTooltip)
}
}
}
}











{#if $$slots.Content}

{:else if innerHTML}
{@html innerHTML}
{/if}


@keyframes fadeInFromNone {
0% {
display: block;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}

.tip, .tip:before {
pointer-events: none;
box-sizing: border-box;
display: block;
opacity: 1;
}

.tip:before {
content: "";
position: absolute;
width: 2rem;
height: 2rem;
z-index: 13;
}

.tip {
animation: fadeInFromNone 0.05s linear 0.05s;
animation-fill-mode: both;
position: fixed;
color: black;
min-width: 3rem;
white-space: nowrap;
display: block;
text-overflow: ellipsis;
white-space: pre;
z-index: 12;
}

Здесь не показано больше CSS, используемых для условного положения с помощью преобразований с использованием CSS VARS, установленных с помощью корректировки ровно>

Подробнее здесь: https://stackoverflow.com/questions/795 ... nteractive