cupcakearmy/svelte-hint
1
0
Fork 0
mirror of https://github.com/cupcakearmy/svelte-hint.git synced 2024-12-24 08:56:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

make inline block

Browse Source
This commit is contained in:
cupcakearmy 2022-05-06 19:20:17 +02:00
parent 85d1887bbb
commit 45513ec72c
No known key found for this signature in database
GPG Key ID: 3235314B4D31232F
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "svelte-hint", "name": "svelte-hint",
"version": "1.0.0-rc.5", "version": "1.0.0-rc.6",
"description": "Tooltip library for svelte", "description": "Tooltip library for svelte",
"author": { "author": {
"name": "Niccolo Borgioli", "name": "Niccolo Borgioli",

9
src/lib/Hint.svelte
View File

@ -12,8 +12,8 @@
export let offset: Parameters<typeof offsetMiddleware>[0] = 4 export let offset: Parameters<typeof offsetMiddleware>[0] = 4
export let auto: boolean | 'start' | 'end' = false export let auto: boolean | 'start' | 'end' = false
let trigger: HTMLSpanElement | null = null let trigger: HTMLDivElement | null = null
let hint: HTMLSpanElement | null = null let hint: HTMLDivElement | null = null
let dataShow = false let dataShow = false
let id = '' let id = ''
@ -60,7 +60,7 @@
}) })
</script> </script>
<div bind:this={trigger} aria-describedby={id}> <div bind:this={trigger} aria-describedby={id} class="wrapper">
<slot /> <slot />
</div> </div>
<div bind:this={hint} {id} data-show={dataShow} role="tooltip" class="svelte-hint-tooltip"> <div bind:this={hint} {id} data-show={dataShow} role="tooltip" class="svelte-hint-tooltip">
@ -72,6 +72,9 @@
</div> </div>
<style> <style>
.wrapper {
display: inline-block;
}
.svelte-hint-tooltip { .svelte-hint-tooltip {
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;