Hide pseudo element when cursor is over it with jQuery or CSS

Question

I'm working on tooltips that are showing help screen for Scheme function names. but I want the tooltip to be hidden when cursor is outside of the span with name, this mean also when I hover over the ::before pseudo element.

.token.__doc__ {
    cursor: help;
    position: relative;
    font-family: monospace;
}
.token.__doc__:hover::before {
    display: block;
    content: attr(data-doc);
}
.token.__doc__::before {
    position: absolute;
    top: var(--top, 100%);
    left: calc(var(--left, 0) * 1px);
    z-index: 400;
    width: 85ch;
    background: var(--color, #ccc);
    color: var(--background, #000);
    white-space: pre;
    padding: 5px;
}

<span style="font-weight: bold;" class="token keyword __doc__" data-text="let" data-doc="(let ((a value-a) (b value-b)) body)

Macro that creates new environment, then evaluate and assign values to
names and then evaluate the body in context of that environment.
Values are evaluated sequentially but you can't access
previous values/names when next are evaluated. You can only get them
from body of let expression."><span>let</span></span>

Is there any way to hide the help tooltip in CSS when you hover over it? Or is jQuery and calculating x/y position the only way?

Temani Afif · Accepted Answer · 2020-12-30 12:12:02Z

pointer-events:none on the pseudo element

.token.__doc__ {
    cursor: help;
    position: relative;
}
.token.__doc__:hover::before {
    display: block;
    content: attr(data-doc);
}
.token.__doc__::before {
    position: absolute;
    top: var(--top, 100%);
    left: calc(var(--left, 0) * 1px);
    z-index: 400;
    width: 85ch;
    background: var(--color, #ccc);
    color: var(--background, #000);
    white-space: pre;
    padding: 5px;
    pointer-events:none
}

<span style="font-weight: bold;" class="token keyword __doc__" data-text="let" data-doc="(let ((a value-a) (b value-b)) body)

Macro that creates new environment, then evaluate and assign values to
names and then evaluate the body in context of that environment.
Values are evaluated sequentially but you can't access
previous values/names when next are evaluated. You can only get them
from body of let expression."><span>let</span></span>

Collectives™ on Stack Overflow

Hide pseudo element when cursor is over it with jQuery or CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related