Git Product home page Git Product logo

svelte-ktippy's People

Contributors

emielh avatar kapsonfire-de avatar

Stargazers

avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

plkmarudny wiblz

svelte-ktippy's Issues

attach tooltip to SVG node?

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 i fail

npm install svelte-ktippy

$ npm -v
6.14.10
  • I got error:
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.

Getting "Cannot use import statement outside a module" on build

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.

popover not positioned at element

popover not positioned at element but tooltip is

  • dependencies
{
"svelte-ktippy": "1.1.0"
 "bootstrap": "^4.6.0",
 "jquery": "^3.6.0",
 "popper.js": "^1.16.1",
 "svelte": "^3.37.0"
}
  • component:
<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>
  • tooltip:
<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>
  • screenshots

kitypopover
kityPopup

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.