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
10
votes
3 answers

Javascript : Tippy.js not working for dynamic content

I have the following tippy where on hover an Ajax call goes and fetches the data, Creates the content and shows it on. But it does not work for dynamic content because on page load the
Gammer
  • 5,453
  • 20
  • 78
  • 121
8
votes
2 answers

Javascript : Destroy tippy.js instance

I have the following code which shows a tooltip containing dynamic data. Its working fine, But it shows same tooltip for all. I have used tip._tippy.destroy(); bit didn't worked.
Gammer
  • 5,453
  • 20
  • 78
  • 121
8
votes
1 answer

How to show tooltip on mouseenter and hide on click with Tippy.js

I am using Tippy.js. I would like to show the tooltip on mouseenter, but hide it on click. This triggers a tooltip when you click on an element with .tippy and stays open until you click away. tippy('.tippy', { trigger: 'click' }); This shows a…
gaheinrichs
  • 565
  • 5
  • 13
7
votes
3 answers

Use Tippy.js in Angular

I have a directive with the following code import { Directive, Input, OnInit, ElementRef, SimpleChanges, OnChanges } from '@angular/core'; import tippy from 'tippy.js'; @Directive({ selector: '[tippy]' }) export class TippyDirective implements…
Thabo
  • 1,303
  • 2
  • 19
  • 40
6
votes
4 answers

How to require tippy.js in Webpack 3.6?

I'm using Laravel Mix, which uses Webpack 3.6, and I'm trying to install https://atomiks.github.io/tippyjs/. My SCSS is probably working fine via @import "../../../../node_modules/tippy.js/dist/tippy.css";. However, at the top of my javascript file,…
Ryan
  • 22,332
  • 31
  • 176
  • 357
5
votes
1 answer

tippy.js tooltips not responding to css styling

I'm using tippy.js for my browser and they'd been working fine until this morning. Suddenly, they won't respond to any CSS styling and just revert to the default dark grey background with a border radius. They respond to changes in the script…
user14727395
4
votes
1 answer

Does userEvent.hover() not works with mouseEnter event when testing react components?

I am using tippy js library to handle tooltips in my app. Now I want to test whether the components shows a tooltip content when hover over an element. The tippy js library says that the tooltip is triggered by either mouseEnter or focus event. When…
Subrato Pattanaik
  • 5,331
  • 6
  • 21
  • 52
4
votes
1 answer

How do I hide TippyJS when element inside it is clicked?

I have to hide my tippy when an element inside it has been clicked (element is i.e. small images acting as links) but I have not been able to find any usefull scripts that works with my tippy. I have i.e. tried these without luck: How to show…
Stig Kølbæk
  • 432
  • 2
  • 18
4
votes
2 answers

Multiple tippy.js instances on a single html element with different trigger options

I am trying to do something very similar (if not the same) to what's been asked in the question here (the answer didn't work for me, it seems like the answerer/creator didn't understand the question). My goal is to have two tippy tooltip instances…
Emir
  • 380
  • 3
  • 11
3
votes
1 answer

Tippy.js z-index not working with interactivity

Ref: https://atomiks.github.io/tippyjs/ The z-index seems not be working when specifying interactive:true (then it falls behind other elements) although I specify the #main_container. How can I get it "on front of everything" with…
edelwater
  • 2,650
  • 8
  • 39
  • 67
3
votes
1 answer

Rails 6, webpack, and tippy.js giving "tippy is not defined" - Where do I call the tippy() function?

I'm relatively new to using Webpack with Rails. I'm attempting to install tippy.js on a Rails 6 app, but I'm having trouble getting it accessible to the view. (I can get it to work if I just include the tippy.js CDN in a script tag in the view, but…
bogardpd
  • 287
  • 1
  • 10
3
votes
2 answers

Cytoscape-popper and Tippy: fails with interactive content

I am using cytoscape to display connections in biological literature and want to show references when edges are clicked. I am following the instructions for using Tippy in conjunction with cytoscape-popper at…
cavallad
  • 31
  • 2
3
votes
2 answers

How can I use Tippy.js in a Google Chrome content script?

I would like to use Tippy.js in a simple Chrome Extension I am building. Basically, I want to use Tippy alongside my content script, but I do not know how to include it without using the cdn. I know I should include it in the manifest.json file…
Wil S.
  • 233
  • 2
  • 7
3
votes
2 answers

Tippy.js not displaying content from the data attribute?

I've installed tippy.js to handle my tooltips, however I am struggling to get the tooltips to display the content set from the data attribute. My default tooltip is working fine, however when I initialise by a class, to be able to add a different…
lky
  • 1,081
  • 3
  • 15
  • 31
3
votes
2 answers

How to have default button to close tool tip of tippyjs

I wanted to have close button for every tooltip how can I have that? Note: I don't want to mess up with design , that is why did not try much , Best solution I'm looking here Below is demo: tippy('#t1,#t2,#t3,#t4',{ content: "Error…
EaBengaluru
  • 131
  • 2
  • 17
  • 59
1
2 3
…
10 11