kapsonfire-de / svelte-ktippy Goto Github PK
View Code? Open in Web Editor NEWLicense: BSD 3-Clause "New" or "Revised" License
License: BSD 3-Clause "New" or "Revised" License
I'm wondering if it's possible to attach the tooltip to an svg node, such that the tooltip appears when the node is hovered?
It looks like the tooltip is a div
that gets appended to the anchor node on hover. If that's the case, I can't think of a way this would work. Would really appreciate any tips or advice. Thanks!
Something like:
<svg>
<rect
use:tooltip={{
component: MyTooltipComponent,
}}
x="0"
y="0"
width="100"
height="100"
fill="#ccc"
/>
</svg>
npm install svelte-ktippy
$ npm -v
6.14.10
npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path C:\Users\tomaz\Documents\NetBeansProjects\GitLab_Arnes\portal-hub\analizator\frontend\node_modules\svelte-ktippy\node_modules\tippy.js
npm ERR! dest C:\Users\tomaz\Documents\NetBeansProjects\GitLab_Arnes\portal-hub\analizator\frontend\node_modules\svelte-ktippy\node_modules\.tippy.js.DELETE
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Users\tomaz\Documents\NetBeansProjects\GitLab_Arnes\portal-hub\analizator\frontend\node_modules\svelte-ktippy\node_modules\tippy.js' -> 'C:\Users\tomaz\Documents\NetBeansProjects\GitLab_Arnes\portal-hub\analizator\frontend\node_modules\svelte-ktippy\node_modules\.tippy.js.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
I am getting
import Tooltip from "./Tooltip.svelte";
^^^^^^
SyntaxError: Cannot use import statement outside a module
when trying to build my app using the tooltip action.
This is most probably happening because of the outdated svelte configuration in package.json.
Adding "svelte": "index.js"
or better the recommended
"exports": {
".": {
"svelte": "./index.js"
}
}
fixes the build error.
Currently there is no easy/transparent way of forwarding custom events from the tooltip's component to the parent.
Parameters passed to component seem to be not reactive?
Is this possible in general?
popover not positioned at element but tooltip is
{
"svelte-ktippy": "1.1.0"
"bootstrap": "^4.6.0",
"jquery": "^3.6.0",
"popper.js": "^1.16.1",
"svelte": "^3.37.0"
}
<script lang="ts">
import { useFocus } from "svelte-navigator";
import { tooltip, popover } from "svelte-ktippy";
import Tooltip from "./Tooltip.svelte";
const registerFocus = useFocus();
const popoverKity = {
component: Tooltip,
arrow: true,
props: { title: "my popover title", content: "My popover content" },
};
</script>
<input use:registerFocus type="text" name="xyxyxy" />
<!-- TODO: implement-->
<div>Not implemented yet</div>
<br />
<div id="pop" use:popover={popoverKity}>popover</div>
<br />
<div
use:tooltip={{
component: Tooltip,
arrow: true,
props: { title: "my tooltip title", content: "My tooltip content" },
}}
>
tooltip
</div>
<script lang="ts">
export let title: string;
export let content: string;
</script>
<div class="card bg-dark text-white" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">{title}</h5>
<p class="card-text">
{content}
</p>
</div>
</div>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.