V2 API / Wishlist 🎈

Let me know what kind changes you would like to see.

V1 didn’t have any input from people so I’d like to prepare a bit better, such as the improving the naming of things, use cases, etc.

To align more with Popper.js I’m thinking:

JS:

• data objects for each tooltip should rename the el property (the element given the tooltip) to reference (like Popper does)
• getReferenceData() should just be getData()? (I had trouble trying to decide what it should be before)
• Rename settings to options throughout (this seems to be more standard from what I’ve seen)
• Get rid of src from package, add ESM/UMD files
• Naming convention cleanup. I think going all lowercase makes things simple. tippy.Browser.SUPPORTED / tippy.Defaults should probably just be tippy.browser.supported and tippy.defaults?

CSS:

• Switch from enter / leave “global” classes to data attributes, like data-state="show" / data-state="hide"? Or x-state?
• Rename arrow classes (.arrow-big etc) and use large in favor of big
• Animation/Theme plugins for more options?
• Also how about injecting CSS to the document straight from the JS to simplify it even further? Not sure if this is bad practice though.

[atomiks]

Some changes I’ve made (in v2-dev branch) so far:

• The popper element now has popper.tippyReferenceElement property. Not sure of this name though… seems kind of long and not straight-forward. Since the popper element is created dynamically by the library itself, maybe just popper._reference?

• Reference elements now have reference._tippy which refers to the instance. By default, calling show() / hide() / destroy() ... without passing in a popper element uses the first one inside store (so therefore it’s currently only useful with single-tooltip-instances)?

• options is now used throughout instead of settings

• Just use lowercase for all names now. tippy.browser.supportsTouch, etc. And tippy.browser.touch is now more semantically tippy.browser.usingTouch to indicate it’s a dynamic changing property. iOS is now not a function because using navigator.platform over navigator.userAgent appears to stay static on first load, so that’s now simplified

• el renamed to reference throughout

• data-* is now data-tippy-*

• position is now placement (aligns with Popper.js)

• x-* attributes have largely replaced classes and data-* attributes for popper/tooltip elements for cleaner CSS (less chance of naming collision)

[pomartel]

The html data attributes could be prefixed with tippy- to add some context and encapsulate the functionality. So for example, data-position would become data-tippy-position.