mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.1 KiB
52 lines
1.1 KiB
7 years ago
|
<button use:tooltip="tooltip">action</button>
|
||
|
<:Window on:keydown="checkForCtrl(event)" on:keyup="checkForCtrl(event)"/>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
data() {
|
||
|
return { tooltip: 'Perform an Action' };
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
checkForCtrl(event) {
|
||
|
if (event.ctrlKey) {
|
||
|
this.set({ tooltip: 'Perform an augmented Action' });
|
||
|
} else {
|
||
|
this.set({ tooltip: 'Perform an Action' });
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
|
||
|
actions: {
|
||
|
tooltip(node, text) {
|
||
|
let tooltip = null;
|
||
|
|
||
|
function onMouseEnter() {
|
||
|
tooltip = document.createElement('div');
|
||
|
tooltip.classList.add('tooltip');
|
||
|
tooltip.textContent = text;
|
||
|
node.parentNode.appendChild(tooltip);
|
||
|
}
|
||
|
|
||
|
function onMouseLeave() {
|
||
|
if (!tooltip) return;
|
||
|
tooltip.remove();
|
||
|
tooltip = null;
|
||
|
}
|
||
|
|
||
|
node.addEventListener('mouseenter', onMouseEnter);
|
||
|
node.addEventListener('mouseleave', onMouseLeave);
|
||
|
|
||
|
return {
|
||
|
update(text) {
|
||
|
if (tooltip) tooltip.textContent = text;
|
||
|
},
|
||
|
destroy() {
|
||
|
node.removeEventListener('mouseenter', onMouseEnter);
|
||
|
node.removeEventListener('mouseleave', onMouseLeave);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|