Tooltip, popover, dropdown, and menu library
MIT License
Bot releases are hidden (Show)
Published by atomiks over 4 years ago
'focusin'
trigger (#689)aria-expanded
attribute if already present on the reference (#690)Published by atomiks almost 5 years ago
onShown
hookPublished by atomiks almost 5 years ago
trigger: 'mouseenter click'
behavior (#659)Published by atomiks almost 5 years ago
popperInstance.reference
on setPropsshowOnCreate
prop should respect delay
Published by atomiks almost 5 years ago
.show()
method (#630)tippy
and delegate
Published by atomiks almost 5 years ago
Props.plugins
createTippyWithPlugins()
- use tippy.setDefaultProps({plugins: [...]});
Published by atomiks almost 5 years ago
onWindowBlur
conditioniife
versions' addons not having plugins passed by default.show()
/ .hide()
to worknull
in delay
/duration
arraysPublished by atomiks about 5 years ago
.tippy-iOS
class side effectsinteractiveBorder
s)hideAll()
works on <iframe>
sdistance
should accept stringspx
unitsarrowType
warningtarget
warning linkPublished by atomiks about 5 years ago
createSingleton
early cancelation)onShow
and onHide
invoked before props'data-tippy-trigger
attributeonAfterUpdate
to preserveInvocation()data-tippy-*
attribute reducerPublished by atomiks about 5 years ago
.currentTarget
over .target
createTippyWithPlugins
Published by atomiks about 5 years ago
View migration guide from v4 to v5
The library is now tree-shakable, allowing you to import and use only the parts you need.
There is now a DEV-only messaging system to help you when things go wrong.
There is a new /animations
folder (like /themes
) and creating custom animations is a smoother experience. Additionally, there is new documentation about fully dynamic transitions of a tippy element's dimensions, and work is being done to create an official API for it.
touch: ["hold", delay]
prop (for long press behavior)arrow: string | SVGElement
values to use your own shapecreateSingleton
addon, supersedes group()
for smooth transitionssticky
behavior to check reference
or popper
rects (or both)inlinePositioning
prop supports better inline element positioning (further behavior options to come)Allows you to extend functionality of tippy instances and create your own props.
Interactive tippies are now accessible by default, and DEV warnings will let you know if there is an accessibility problem.
animateFill: true
is no longer default, so the shape cut off issue is not present with large content unless you intentionally use itmousedown
instead of click
.disable()
will hide an instance if it's currently visibledelay
, if the tippy began to transitioning out and the instance was triggered again before unmounting, it will ignore the delay
delay
is always 0Package Managers:
# npm
npm i tippy.js@5
# Yarn
yarn add tippy.js@5
CDN:
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>
Published by atomiks about 5 years ago
sticky
option by preventing repaints on every animation framestyle
node before the first style
or link
tag instead of first childdelay
referenceNode
property for followCursor (NOTE: awaiting [email protected] release)
Published by atomiks over 5 years ago
followCursor
having incorrect offset when using a variation placement (-start
or -end
) (#513)Published by atomiks over 5 years ago
followCursor
fixes (respects boundary & fix regression where initial was not placed correctly on touch devices on first show)destroy()
's unmounting of the tippy can never be impededpointer-events: auto
(#504)Published by atomiks over 5 years ago
data-tippy-stylesheet
to style tag (#483)Published by atomiks over 5 years ago
triggerTarget
option to apply the trigger listeners to a different node from the positioning referenceonTrigger
option to allow calls to .set()
to change the reference position and instance props based on the event before the tooltip is shown without interrupting the lifecycle (unlike wait
)tippy.group()
and updateDuration
updateablepopperOptions.onCreate
and popperOptions.onUpdate
are called so they match the actual invocations by Popper.jsfollowCursor
not respecting popperOptions.modifiers.preventOverflow.padding
hideOnClick: true
followCursor: '{horizontal, vertical}'
and interactive: true
Published by atomiks over 5 years ago
x-out-of-boundaries
attribute to tooltip node (#455)set()
: avoid recreating popperInstance by comparing props (#456)Published by atomiks over 5 years ago
x-placement
attribute to tooltip node, allowing you to style without needing to use the .tippy-popper
selectorBefore:
.tippy-popper[x-placement^='top'] .tippy-tooltip.my-theme .tippy-arrow {
border-top-color: pink;
}
After:
.tippy-tooltip.my-theme[x-placement^='top'] .tippy-arrow {
border-top-color: pink;
}
.set()
with a popperInstance
dependency updatePublished by atomiks over 5 years ago
Minor release was bumped due to large TypeScript refactor and a minor package fields change.
Props
interface was deprecated in favor of Options
. Use Required<Options>
to mimic the internal Props
interface."main"
and use the "unpkg"
field (#445)preventOverflow
paddingtippy.group()
Published by atomiks over 5 years ago
This release mainly fixes some minor CSS issues
rem
units align with whole pixels using 16px base defaultpopperOptions
is undefined
instead of an objectpreventOverflow
not taking into account the distance
prop