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
0
votes
1 answer

Tippyjs - How to pass data-value on clicked button to the template

I have multiple buttons using the same tippy function that creates a dynamic template. I need to take the data-value="" from the clicked button and pass it to the tippyjs. The button
user13305104
0
votes
0 answers

Overlapping when multi poppers are appeared on the screen

I need to show multi popper elements on the page at the same time. But the problem is that there is an overlapping when two of them are close to each other. Is there a way to solve this? I give my code which is related to popper elements below. I…
Murat
  • 109
  • 6
0
votes
0 answers

Is it possible to call the tippy (js) constructor only on the newest added popover?

after I created the popovers I am calling the tippy() constructor like: tippy('.my-tippy-popover', { ... }); But this is creating all existing tippy popovers again. So if you have 80 popovers and you add a new one, then the tippy() constructor is…
Luz
  • 11
  • 3
0
votes
1 answer

Exclude some selectors from a global dark theme

I have this .scss rule that applies a global dark theme. #app.dark-theme { // LOTS of rules... } I've decided that opposite-themed tooltips look better. Instead of dark theme tooltips on dark theme #app, I like light theme tooltips on dark theme…
Eric Guan
  • 15,474
  • 8
  • 50
  • 61
0
votes
1 answer

Meteor use tippy.js on two claases/elements

I need two tooltips with different content to appear on 4 elements which I have given 2 identical class names. The html looks like: and
user2829319
  • 239
  • 4
  • 16
0
votes
1 answer

Getting proper 'this' value in tippy.js

When a tippy.js tooltip is triggered, I want to be able to get "this" from it. I've tried: tippy(".sampleID",{ arrow:true, placement: "bottom", content(reference) { const title =…
Shawn
  • 3,031
  • 4
  • 26
  • 53
0
votes
1 answer

tippy tooltip position with browser zoom in/out

I have made a popover with tippyjs. Tippy takes next options: const tippyInstance: any = tippy(element, { content: loaderTemplate, placement: 'right', animation: 'fade', animateFill: false, …
Bogdan Tushevskyi
  • 712
  • 2
  • 12
  • 25
0
votes
1 answer

React: Tippy button not displaying onCursorActivity

I am using CodeMirror for syntax highlighting. I'd like to fire a popup when the user clicks on the text. I'm using React Tippy - a React component based on Tippy.js. Basically, I'm not getting any tippy popup. I'm also not getting any errors. I…
maddie
  • 1,854
  • 4
  • 30
  • 66
0
votes
2 answers

Remove focus from the span element

I have below jsfiddle and I have tried few ways mentioned in this SO question but I am unable to remove the focus from "feedback" span after clicking on jquery confirm cancel button. Steps: Click on feedback Click on cancel button on the…
Akshay
  • 1,412
  • 2
  • 17
  • 51
0
votes
1 answer

Tippy.js only works after first page refresh on Angular project

I have installed tippy.js on my angular project, which is a tooltip library (https://atomiks.github.io/tippyjs/), but it only works after refreshing the page for the first time. I've installed it through npm install tippy.js command and imported it…
Gustavo Branco
  • 49
  • 8
0
votes
1 answer

tippy.js version interference

I have an angular 7 app where I have a directive to create tooltips using tippy.js 4.0.2. This works perfectly fine on local mode (ng serve). However as soon as I try to integrate it into a page running on my server, which has tippy.js 2.6.0 as a…
Brian
  • 21
  • 5
0
votes
2 answers

How to show tags in double quotes?

In the Tippy, I want to show tags in tooltip's. For this, I tried: OR
Jack Daniels
  • 78
  • 9
0
votes
1 answer

Why tippyjs cursor pointer and click is not working as expected

i'm using tippyjs https://atomiks.github.io/tippyjs/ plugin for user list tooltip Problem: click is not working for above(image) list item, for styling i have to get the refrence and do styling(difficult, see onShow()). Note: click on ... to see…
EaBengaluru
  • 131
  • 2
  • 17
  • 59
0
votes
0 answers

Using Tippy.js within an Angular component

I'm trying to bind tooltips to some DOM elements in my component using Tippy.js. Below is my bare bones example test.component.ts as I'm unable to make it even show up. import ... import { ViewChild, ElementRef } from @angular/core; import tippy…
Hyperbola
  • 466
  • 1
  • 6
  • 20
0
votes
1 answer

How to catch tippy js template event

i use tippy.js with html template. My code as: self._tippy = Tippy('.test', { html: '#test_id', .... .... onShow(){...} ... }) In html template i have select tag with onclick event as: