2023-07-07 15:46:41 +02:00
|
|
|
<script>
|
|
|
|
import AbsTooltip from "./AbsTooltip.svelte"
|
|
|
|
import { onDestroy } from "svelte"
|
|
|
|
|
|
|
|
export let text = null
|
|
|
|
export let condition = true
|
2023-09-01 11:07:37 +02:00
|
|
|
export let duration = 5000
|
2023-07-07 15:46:41 +02:00
|
|
|
export let position
|
|
|
|
export let type
|
|
|
|
|
|
|
|
let visible = false
|
|
|
|
let timeout
|
|
|
|
|
|
|
|
$: {
|
|
|
|
if (condition) {
|
|
|
|
showTooltip()
|
|
|
|
} else {
|
|
|
|
hideTooltip()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const showTooltip = () => {
|
|
|
|
visible = true
|
|
|
|
timeout = setTimeout(() => {
|
|
|
|
visible = false
|
|
|
|
}, duration)
|
|
|
|
}
|
|
|
|
|
|
|
|
const hideTooltip = () => {
|
|
|
|
visible = false
|
|
|
|
clearTimeout(timeout)
|
|
|
|
}
|
|
|
|
|
|
|
|
onDestroy(hideTooltip)
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<AbsTooltip {position} {type} text={visible ? text : null} fixed={visible}>
|
|
|
|
<slot />
|
|
|
|
</AbsTooltip>
|