Tippy v7 #991
Replies: 6 comments 4 replies
-
I definitely would love to see that increased focus on headless & accessibility! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much for sponsoring me! For the React wrapper that's definitely something I want to implement by default for v5. The way singletons were written is what made it unfeasible for the current version based on my inspection. |
Beta Was this translation helpful? Give feedback.
-
Progress Update 1I've been making progress on my local v7 branch. Once the code is in a decent state I can make a PR if necessary for review, including screenshots of the new docs. API changes
ExplorationModularity: I've been experimenting with making virtually everything a plugin but quickly realized that certain props are deeply linked to the behavior of other ones, making it difficult to split them out. If they provided data in some form, like Popper has with Accessibility: I'm thinking Performance: I'm thinking we continue to use DocsThis will by far take up the most time but I think the payoff will be worth it. I'm completely starting from scratch and taking inspiration from Parcel 2, Tailwind and Apple's landing pages. I'm using Tailwind for CSS styling and Next.js for the static generation, and so far they're both more enjoyable to use than the current docs setup. I bought the |
Beta Was this translation helpful? Give feedback.
-
|
Hi @atomiks thank you for all the great work you've done on Tippy thus far. I'm using Tippy for for numerous cases (from context menus, dropdowns, to anchored popovers that change arrow direction depending where they are offscreen via popper modifiers). The couple pain points so far for me have been:
Here's to Tippy v7 🍻 . Thanks again. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @chasegiunta thank you for your feedback, very appreciated!
|
Beta Was this translation helpful? Give feedback.
-
|
@atomiks Sure! And I guess I should elaborate on that point - we're trying to get away from writing stylesheets and using Tailwind for everything, hence the need for the plugins. I'm aware of the themes usage, but in an attempt to keep everything out of css, I'm using plugins so we directly hand off props like |
Beta Was this translation helpful? Give feedback.
-
|
For Tailwind, I am using the In vanilla tippy, you can also use the |
Beta Was this translation helpful? Give feedback.
-
Progress Update 2Concept rebrandI've decided to rebrand the library to be more generic and highlight the move to a more "low-level" nature The new slogan is:
instead of:
It's simpler and more tersely describes the library. The old slogan sort of implied that it could only craft those 4, and that there were "prebuilt" configurations e.g. ( The dependency list is like: For instance, Bootstrap's tooltips and popovers the highest level you can achieve, since they are pre-styled, pre-rendered, and the functionality is pre-built. Popper is the lowest level you can achieve, as it just positions an element. Tippy exists as sort of an in-between abstraction for developers to use. Landing pageHere are some sections I've made:
AccessibilityBecause Instead, I believe that good documentation will be the key to enabling developers using Tippy to make their element accessible. The
e.g. for interactive popovers, I have created a section demonstrating focus trapping or DOM source order techniques of keyboard navigation. The key takeaway is that Tippy is a low-level builder for all types of floating elements, and not a higher-level preconfigured UI element builder, like a More API changes
|
Beta Was this translation helpful? Give feedback.
-
|
So small update: while working on this I also got some ideas for an API rewrite for Popper v3 (Tippy's dependency) which I have put all my focus on for now. It's going to be far smaller in weight, platform-agnostic (can run on React Native), easier to extend, etc. Since Tippy is built on it, it will also improve Tippy's own usage/API, making all the ideas I had for v7 work better. The rewrite is almost done, with only a few things remaining, then I can put all focus back onto this 😃
Been posting about it on Twitter: https://twitter.com/atomiksdev |
Beta Was this translation helpful? Give feedback.
-
|
The concepts I had for Tippy v7 are now going to be created under my new Tippy.js is going to be in lower maintenance mode from this point. I created it in early 2017 in like 3 days when I had no idea what I was doing, and somehow it got 2K stars in a couple of days when I released it. But I've learned so much since then thanks to this library and other open source projects, that it's better to start something new with all this new knowledge than to refactor all the legacy baggage.
❤️ |
Beta Was this translation helpful? Give feedback.
-
Tippy v7
It’s now been 1.5 years since Tippy 6 released to use the brand new Popper 2 positioning engine, and is the longest-lasting major version of the library to date. As time has passed I have gathered more feedback and ideas for making the library the best it can possibly be.
My main goal with this new major version is to focus on accessibility, API streamlining for renderless styling, modularity, performance, and documentation.
Accessibility
Tippy has had basic accessibility features since v0 in 2017 and has steadily improved, but the area most notably lacking is with interactive tippies. While proper keyboard management can be added by the developer on top of the library, baked-in accessibility is very important for the web as most developers of small projects will neglect users of assistive technology.
Focus management of interactive content within a tippy is enabled, but it requires appending the tippy element next to the reference element to enable focus to move within the popover immediately. This is done by default, but can cause issues in some cases (when setting
interactive: true) in terms of positioning and styling. I believe the library should handle focus by default in some way depending on the context the tippy is being used as without appending next to the reference element.For more complex UI elements, like a dropdown menu, there is no arrow key navigation for instance. Dismissing a tooltip is also not currently possible by default, unless added by the developer.
API streamlining for renderless styling
Some legacy render/styling-related props were added, such as
inertia, back when the library focused more on being a fun tooltip library to quickly add tooltips to your website, rather than a more robust, headless type of solution to use in UI libraries like React. These props have no use to headless users for the most part, unless theirrenderfunction utilizes it in some way, resulting in pollution of thePropsobject.Headless UI libraries are the future, and I want Tippy to move more in this direction. A lot of work was already done to enable this in v6, but the API can be streamlined to better separate
render-related props andlogic-related props for users.Of course, the plug-n-play nature of Tippy is important for adoption, so this will remain a focus too.
Modularity
Users of libraries will find it annoying when their use-case is not supported by the library. Tippy made strides with this in v6 by creating a plugin system to extend the library, but a ton of the functionality is still baked-in to core, and therefore cannot be treeshaken away by bundlers. Further, it's difficult to modify behavior of existing props, such as
interactive. Splitting out more of the core into plugins should enable more flexibility for users. The idea behind improving this area more is to retain the "library doesn't support my use case" users by letting them know their use case can be added on top easily.Performance
There have been reports of delays regarding hiding or showing the tippy. This might be related to appending the tippy to the
<body />when there are a large number of nodes in the user's document. An article recently written showed that these poppers should be appended to a separate<div />node within<body />to improve performance. Perhaps this should be enforced by default, or at least documented better.Documentation
There was a shift of focus in v6 away from tippy being solely a "tooltip" library and more toward generic "popper" elements in general. I believe the documentation can be improved in this regard, especially a
Recipessection with a ton of examples and use-cases for users to look at beyond just basic tooltips. A cool landing page and a proper domain not hosted on GitHub pages will likely make the library more attractive too.Singletons
Singletons were a quick, fun idea I came up with and put on the docs to showcase what you can do with Tippy. Right away, people wanted to know how to make them, so an official API was created thereafter. Over the years however, singletons have proven to be quite complex and problematic in the following ways:
moveTransitiondisabledand visible` props in React did not workThey should be rewritten with these issues in mind.
Your thoughts?
What pain points have you experienced using the library, and how do you think it can be improved? I'd like to hear your thoughts. My goal is to get this new version released by 2022.
Beta Was this translation helpful? Give feedback.
All reactions