question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamic theme / placement (props) on tippy component

See original GitHub issue

Whasup! thanks for the component / directive: is awesome 😃

I assumed that the <tippy> component would react to prop changes but i’m not getting it to work. Am I missing something or is something expected?

Here’s a codesandbox basic demo.

Thanks in advance!

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
stylianospanagakoscommented, Feb 16, 2022

@KABBOUCHI I actually changed the code by adding the v-tippy directive instead i.e.

<button v-tippy="{placement: 'right', theme}" content="Online Resources">View</p>

and everything seemed to work just fine! Gave a try though on another project with the alpha.46 version and I managed to make it work as well. Thank you!

1reaction
renatodeleaocommented, Oct 22, 2018

Damn Georges, that was fast.

Makes sense. I’ve updated the CodeSandbox demo to 2.0.20 for reference if anyone gets here. Now working for <tippy> component.

Thanks a lot!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Themes | Tippy.js
Tippies can have any custom styling via CSS. #Included themes. The package comes with themes for you to use: light; light-border; material ...
Read more >
Examples - npm.io
All of the native Tippy.js props can be passed to the component. ... if it's dynamic const flipBehavior = useMemo(() => [placement, 'bottom'],...
Read more >
FAQ | Tippy.js
const instance = tippy(element, {theme: 'custom-dark'}); // When clicking the theme toggle button, you can do this: instance.setProps({theme: ...
Read more >
React component for Tippy.js For more information ... - Snyk
A React alternative to the theme prop. The className gets added to the tooltip element's class list as expected, without adding -theme as...
Read more >
Customizable Interactive Tooltips In Pure JavaScript - Tippy.js
Tippy.js is a small yet highly customizable JavaScript tooltip ... New inlinePositioning prop supports better inline element positioning ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found