73 lines
1.5 KiB
HTML
73 lines
1.5 KiB
HTML
|
<!-- Simple tooltip styled to look like an abbr.
|
||
|
|
Modeled after https://github.com/nico3333fr/van11y-accessible-simple-tooltip-aria
|
||
|
|
-->
|
||
|
|
<span class="tooltip-button"
|
||
|
|
aria-describedby="tooltip-{id}"
|
||
|
|
role="button"
|
||
|
|
tabindex="0"
|
||
|
|
on:mouseover="set({shown: true, mouseover: true})"
|
||
|
|
on:mouseleave="set({shown: false, mouseover: false})"
|
||
|
|
on:click="toggle(event)"
|
||
|
|
on:keydown="onKeydown(event)"
|
||
|
|
>
|
||
|
|
{text}
|
||
|
|
</span>
|
||
|
|
<span id="tooltip-{id}"
|
||
|
|
class="tooltip {shown ? 'shown' : ''}"
|
||
|
|
role="tooltip"
|
||
|
|
aria-hidden={!shown}
|
||
|
|
>
|
||
|
|
{tooltipText}
|
||
|
|
</span>
|
||
|
|
<style>
|
||
|
|
.tooltip-button {
|
||
|
|
border-bottom: 1px dotted;
|
||
|
|
}
|
||
|
|
.tooltip {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
background: var(--tooltip-bg);
|
||
|
|
color: var(--tooltip-color);
|
||
|
|
padding: 5px 10px;
|
||
|
|
font-size: 0.9em;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.tooltip.shown {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 767px) {
|
||
|
|
.tooltip {
|
||
|
|
left: 0;
|
||
|
|
transform: translateY(calc(-100% - 5px));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
let counter = 0
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data: () => ({
|
||
|
|
id: ++counter,
|
||
|
|
shown: false,
|
||
|
|
mouseover: false
|
||
|
|
}),
|
||
|
|
methods: {
|
||
|
|
toggle (e) {
|
||
|
|
e.preventDefault()
|
||
|
|
e.stopPropagation()
|
||
|
|
let { shown, mouseover } = this.get()
|
||
|
|
if (!mouseover) {
|
||
|
|
this.set({ shown: !shown })
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onKeydown (e) {
|
||
|
|
if (e.keyCode === 32 || e.keyCode === 13) { // enter or space
|
||
|
|
this.toggle(e)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|