profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/atomiks/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
James N atomiks Gold Coast, Australia

atomiks/tippyjs 9137

Tooltip, popover, dropdown, and menu library

atomiks/tippyjs-react 1301

React component for Tippy.js (official)

fejes713/accessibility-guide 488

A curated collection of web accessibility tips, tricks, and best practices

atomiks/moonlight-vscode-theme 374

A VS Code theme with bubblegum colors on a moonlit background

atomiks/elastic-scroll-polyfill 65

macOS/iOS elastic scroll polyfill on scrollable elements

atomiks/rate-my-life 63

Your life rated in 7 categories

atomiks/moonlight-theme 16

Syntax theme for Atom - bright bubblegum colors with a moonlit gradient background

atomiks/30-seconds-of-css 15

Redirect to https://30-seconds.github.io/30-seconds-of-css/

atomiks/Ripple.js 15

Adds Material style ripple to anything

atomiks/hyperapp-kit 14

A starter kit for Hyperapp with prerendering.

issue commentatomiks/tippyjs

Package for offline Install

You might be able to download the folder for offline use from the unpkg CDN

xtlc

comment created time in 11 days

issue closedatomiks/tippyjs

how to wait for the hide animation to end to call destroy?

I want that when I destroy the component the popover animate hide and after that, destroy it

closed time in 12 days

edumudu

issue closedatomiks/tippyjs

Even with aria set to null, the aria-describedby attribute is still added to the element

Bug description

In contrast to the documentation, setting aria property to null makes no difference, and Tippy still adds the aria-describedby attribute to the element. I would really appreciate if it didn't change the element when aria is set to null.

Reproduction

CodePen link: https://codepen.io/damir_p/pen/xxdwzBJ

closed time in 12 days

DaTrader

issue commentatomiks/tippyjs

Even with aria set to null, the aria-describedby attribute is still added to the element

The aria prop expects an object not null.

aria: {content: null}

DaTrader

comment created time in 12 days

issue closedatomiks/tippyjs

Can't resolve tippy.js/dist/tippy.css

Per the docs, I am using the following in app.js. I use Laravel Mix/Webpack as my preprocessor.

// Tippy.js
import tippy from 'tippy.js'
import 'tippy.js/dist/tippy.css'

When compiling, I get the following error...

Module not found: Error: Can't resolve 'tippy.js/dist/tippy.css' in '/Users/jacobgraf/Sites/mysite/src/js'

When I look in node_modules/tippy.js, I don't even see a dist directory. I deleted the whole node_modules directory and re-ran npm install and still no dist directory.

What am I missing here?

closed time in 12 days

jacobgraf

issue closedatomiks/tippyjs

Cannot read property 'setContent' of undefined

The error message is as follows: 1619745195106 I introduced tippy in the react project: import tippy from'tippy.js' import'tippy.js/dist/tippy.css'; The above error code is as follows: 1619745339229 Hope you can help to solve it!

closed time in 12 days

1144075799

issue commentatomiks/tippyjs

Cannot read property 'setContent' of undefined

Well the variable tippyInstance is undefined for some reason. Maybe initialize isn't being called before the update() callback is firing.

1144075799

comment created time in 12 days

issue closedatomiks/tippyjs

Any way to get the reference to the initial target element?

const targetEl = document.querySelector('#button')
const instance = tippy(targetEl, { content: hello })
console.log(instance.props.triggerTarget)  //  ===> null

https://atomiks.github.io/tippyjs/v6/all-props/#triggertarget

For some reason, I want to dynamically add & remove target element from a tippy instance, however, I cannot find any API to get the initial target element. I cannot understand why it is null, though the documentation said this:

tippy(targets, {
  // default (reference is used)
  triggerTarget: null,
});

closed time in 12 days

kuanyen

issue commentatomiks/tippyjs

Any way to get the reference to the initial target element?

The "documentation" is just this https://atomiks.github.io/tippyjs/v6/tippy-instance/#shape-and-properties and asks you to inspect the properties of the instance which could be a lot better 😅

It seems I cannot change this value? (if change element, the tooltip cannot show up anymore...)

Yeah you can't. You need to destroy the old instance and make a new one

kuanyen

comment created time in 12 days

issue closedatomiks/tippyjs

Not removed after reference remove from DOM

Bug description

Hello! When the item is removed from the DOM, let's say I delete the item of the purchase, the item itself is removed and tippy jumps to the upper right corner, because reference element disappeared...

closed time in 12 days

VictorPulzz

issue commentatomiks/tippyjs

Not removed after reference remove from DOM

In this case it's your responsibility to destroy the tippy along with the removal of the element.

VictorPulzz

comment created time in 12 days

issue commentatomiks/tippyjs

Tippy position is just wrong and I dont know what to do...

A Popper update might have broken something. If you downgrade to an old version, @2.9.2 is there an issue?

RickKukiela

comment created time in 12 days

issue closedatomiks/tippyjs

Wrong calculations for position when page styles used 'rem' instead of px

  1. When page uses px all works fine image

  2. When page uses rem image

closed time in 12 days

7iomka

issue commentatomiks/tippyjs

Wrong calculations for position when page styles used 'rem' instead of px

It happens with px also. Looks like the flex container is the issue. If you append the tooltip outside of the flex header container (i.e. appendTo: () => document.body) it works, might be an issue with the latest Popper version (or was always a bug)

7iomka

comment created time in 12 days

push eventatomiks/tippyjs

Gautier Ben Aïm

commit sha 0b10cfbf72d8db7932b371f24ff78d2ad140a0d5

fix: reset white-space to its initial value (#969)

view details

push time in 20 days

PR merged atomiks/tippyjs

fix: reset white-space to its initial value

When a tooltip is added to a <pre> element (or any elements that has white-space: pre), the arrow appears broken.

Example:

image

(white-space: pre was added to the parent <div> to trigger the bug)

+1 -0

0 comment

1 changed file

GauBen

pr closed time in 20 days

issue closedatomiks/tippyjs-react

Interactive tippy shows a weird internal border on hover for half a second

Interactive tippy shows a weird internal border on hover for half a second: https://user-images.githubusercontent.com/21168856/124082323-e0463800-da4c-11eb-9192-6beb82671e95.mov

temp fixed with:

.tippy-content {
  transition-property: none!important;
}

closed time in 20 days

alicerocheman

issue commentatomiks/tippyjs-react

Interactive tippy shows a weird internal border on hover for half a second

This looks like an issue with the content inside your tippy.

alicerocheman

comment created time in 20 days

issue commentatomiks/tippyjs-react

Show different text on hover (Copy To Clipboard) & on click (Copied)?

What you've done should work. Have you tried replicating it on CodeSandbox?

deadcoder0904

comment created time in 20 days

issue commentatomiks/tippyjs-react

Dynamic `visible` prop doesn't work as expected

Doesn't look like the lib handles a dynamic change for that prop: https://github.com/atomiks/tippyjs-react/blob/master/src/Tippy.js#L46-L62

benface

comment created time in 20 days

issue commentatomiks/tippyjs-react

Unnecessary div ?

It's the container node in which the React content is inserted into, which is created by this wrapper lib. It was easier than the alternative of using the .tippy-content node, IIRC

maxime4000

comment created time in 20 days

issue commentatomiks/tippyjs

Tooltips not working inside of Alpine.js' `<template x-if="">` and `<template x-for="">` attributes

The framework should(?) have lifecycle events that correspond to when the elements in its render/template get created. These hooks allow you to initialize Tippy correctly.

dfallman

comment created time in 22 days

issue commentatomiks/tippyjs

[Feature Request] Add option to prevent opening tooltip on `mouseenter` if mouse button is pressed

I think this behavior can be added on your own as a plugin? https://atomiks.github.io/tippyjs/v6/plugins/

benface

comment created time in 22 days

issue commentatomiks/tippyjs

virtualReference & boundaryEl

The getReferenceClientRect prop is the same thing.

borm

comment created time in 22 days

issue closedatomiks/tippyjs

virtualReference & boundaryEl

Problem

https://popper.js.org/react-popper/v2/virtual-elements/ https://github.com/atomiks/tippyjs-react/blob/master/index.d.ts#L13

Solution

if Popper allows us to use PopperJS.VirtualElement & preventOverflow, why are u dont?

closed time in 22 days

borm

issue commentatomiks/tippyjs

Blurred/frosted background

The selector in the latest version (v6) is .tippy-box not the above.

spyderdsn

comment created time in 22 days

issue closedatomiks/tippyjs

Blurred/frosted background

I tried to create a theme with a blurred (frosted) tippy background however it looks like this is not possible. Any idea how to achieve this? The output is transparent, not frosted. Thanks

.tippy-popper .tippy-tooltip  {
      -webkit-backdrop-filter: blur(20px) saturate(200%);
      backdrop-filter: blur(20px) saturate(200%);
      -webkit-box-shadow: 0 0 20px rgb(0 0 0 / 10%);
      box-shadow: 0 0 20px rgb(0 0 0 / 10%);
      background: hsla(0,0%,100%,.8);
}

closed time in 22 days

spyderdsn

issue commentatomiks/tippyjs

How to force Tippy to update its positioning?

Calling instance.popperInstance.update() will manually update its position.

GitHubish

comment created time in 22 days

issue commentatomiks/tippyjs

how to wait for the hide animation to end to call destroy?

You might want to call destroy in onUnmount()

edumudu

comment created time in 2 months

issue commentatomiks/tippyjs

Focus Management with Singleton

One of singletons' features is that you can apply smooth transitions to the tippy, which isn't possible if you were to change its location in the DOM to work with this sort of browser-default focus management. A JavaScript solution is likely required here.

Kashkin

comment created time in 2 months