Stack Overflow
Stack Overflow

Questions tagged [tippyjs]

A highly customizable vanilla JS tooltip/popover library powered by Popper.js.

For reference: https://atomiks.github.io/tippyjs/

154 questions
2
votes
1 answer

Use Angular's interpolation for data-tippy-content

I'm working on an Angular project and have tippy.js working fine ( https://atomiks.github.io ). The problem is that I need to fill the tooltips with some JSON information that I could place with Angular's interpolation, but the following error shows…
Gustavo Branco
  • 49
  • 8
2
votes
1 answer

How to get tippy.js to use individual svg elements as targets when the SVG is embedded in an HTML object tag?

I have an svg embedded in HTML using an object tag
Your browser doesn't support SVG.
I want to use the tippy.js library to provide…
P.Ellis
  • 55
  • 2
  • 10
2
votes
1 answer

Uncaught TypeError: Popper is not a constructor

I try to edit CSS stlye of Tippy.js. So I npm install tippy and import it to my html like this But, it has some error. Uncaught TypeError: Popper is not a constructor at…
Man In The Middle
  • 23
  • 1
  • 1
  • 3
2
votes
1 answer

tippy plugin cannot show multiple tooltips with HTML content

I have a tippy plugin initialized this way: tippy('.tooltip_commands', { delay: 100, arrow: true, arrowType: 'round', size: 'large', duration: 500, …
jstuardo
  • 3,901
  • 14
  • 61
  • 136
2
votes
2 answers

Include an input field in a Tippy tooltip

I simply use Tippy capability to have an input field included in the tooltip. Everything works fine, except that it is impossible to write anything in the input field. Is it possible to do it? How? Here is my code:
Xavier
  • 41
  • 5
2
votes
1 answer

How to import tippy.js into an html page with webpack 4?

Per the tippy.js git hub page I installed it with npm: npm i tippy.js Now I have a .js source file that's used for a webpack 4 html page that gets output to my ./dist folder, but I don't know how to import it; my other option is just to include it…
leeand00
  • 25,510
  • 39
  • 140
  • 297
2
votes
1 answer

Bind events to elements inside TippyJS HTML tooltip

I'm using TippyJS to show HTML tooltips. I have some interactive content inside the tooltip so I'd like to bind events to those elements. Because the tooltip content is generated dynamically by Tippy, standard jQuery event bindings don't seem to…
Dan
  • 5,836
  • 22
  • 86
  • 140
2
votes
1 answer

tippyjs offset not working

I'm using Tippy.js with an embedded HTML form, which is relatively large. My problem is that when I click the trigger object that is too close to the top of the browser window, the popper gets cut off. Tippy has an offset attribute that looks like…
Shawn
  • 3,031
  • 4
  • 26
  • 53
2
votes
1 answer

How to have tippy tooltips with different several colors?

I'm using Tippy.js for tooltips. I have several groups of icons with their tooltips. Fine. Problem: each group should show tooltips in different colors, based on the icons group's container class. But tooltips are by default instantiated in…
Luca Reghellin
  • 7,426
  • 12
  • 73
  • 118
1
vote
0 answers

Tiptap with Tippy - bubble menu doesnt work

I'm trying to create fixed bubble menu for my node using Tippy. First of all, I wanted to create this menu using BubbleMenu extension but then it changes its location when I change the cursor position inside of my menu. So I decided to wrap my…
Mercer
  • 51
  • 6
1
vote
2 answers

How do I apply methods to a tippy.js instance from another file?

I am using tippy.js and swiper.js. I am setting Tippy up as such: tippy('.tippy', { allowHTML: true, theme: 'light div lg', offset: [0, 16], }); This works fine. However, I would like to close/hide tippy instances when a swiper.js has a…
MeltingDog
  • 14,310
  • 43
  • 165
  • 295
1
vote
0 answers

Tippyjs updating tippy content dynamically doesn't replace old content

What's the best way to re-initialize tippy and possibly only do it for elements that don't already have a tippy instance, or to target a specific tippy instance and replace it? When I try to target an instance and destroy it, nothing gets destroyed,…
hyphen
  • 2,368
  • 5
  • 28
  • 59
1
vote
0 answers

How to get NODE_ENV to a Rails 7 with Propshaft to a javascript library?

Trying to use tippy.js library on a brand new Rails 7 application with Propshaft without webpack or sprockets, loading it via Importmap and getting an error on the browser's inspector saying Uncaught ReferenceError: process is not defined. At the…
fagiani
  • 2,293
  • 2
  • 24
  • 31
1
vote
1 answer

How to use Tippy.js with Typescript (without React, jQuery, etc)

I need a full example on how to use Tippy.js with Typescript. I see in all examples lines similar to import tippy, {Tippy, Props, Plugin, LifecycleHooks} from 'tippy.js'; tippy('[data-tippy-content]'); However, I get the error message This…
Wizard of Kneup
  • 1,863
  • 1
  • 18
  • 35
1
vote
0 answers

react-tippy not being positioned properly on sidebar

I am using @tippyjs/react": "^4.2.6 & the problem is that react-tippy not being positioned properly on sidebar of our dashboard, whenever there is content more than screen height and is scrollable the tippy button is placed more above than it is…
Shiraaz
  • 175
  • 2
  • 11
1 2
3
…
10 11