All Props

"Props" are configurable properties you can pass optionally to thetippy()constructor.

tippy(targets,{// props});

• allowHTML
• animateFill
• animation
• appendTo
• aria
• arrow
• content
• delay
• duration
• followCursor
• getReferenceClientRect
• hideOnClick
• ignoreAttributes
• inertia
• inlinePositioning
• interactive
• interactiveBorder
• interactiveDebounce
• maxWidth
• moveTransition
• offset
• onAfterUpdate
• onBeforeUpdate
• onClickOutside
• onCreate
• onDestroy
• onHidden
• onHide
• onMount
• onShow
• onShown
• onTrigger
• onUntrigger
• placement
• plugins
• popperOptions
• render
• role
• showOnCreate
• sticky
• theme
• touch
• trigger
• triggerTarget
• zIndex

#allowHTML

Determines ifcontent strings are parsed as HTML instead of text.

Warning

Make sure you are sanitizing any user data if rendering HTML to prevent XSSattacks.

tippy(targets,{// defaultallowHTML:false,// parse `content` strings as HTMLallowHTML:true,});

#animateFill

Determines if the background fill color of the tippy should be animated.

tippy(targets,{// defaultanimateFill:false,// enable itanimateFill:true,});

Plugin

When using modules (esm), you must import this plugin to use it.

You must also import thedist/backdrop.css &animations/shift-away.cssstylesheets for styling to work.

import tippy,{animateFill}from'tippy.js';import'tippy.js/dist/backdrop.css';import'tippy.js/animations/shift-away.css';tippy(targets,{animateFill:true,plugins:[animateFill],});

#animation

The type of transition animation. SeeAnimations for details.

tippy(targets,{// defaultanimation:'fade',});

Note

This isfalse by default when usingHeadless Tippy.

#appendTo

The element to append the tippy to. Ifinteractive: true, the default behaviorisappendTo: "parent". SeeAccessibilityfor more information.

Sometimes the tippy needs to be appended to a different DOM context due toaccessibility, clipping, or z-index issues.

tippy(targets,{// default (takes reference as an argument)appendTo:()=>document.body,// append to reference's parentNodeappendTo:'parent',// append to an ElementappendTo:element,});

#aria

The aria attribute configuration. Both properties are optional:

• content: Thearia-* attribute applied to the reference element to announcethe tippy content.
• expanded: Whether to add anaria-expanded attribute to the referenceelement.

tippy(targets,{// defaultaria:{// `null` when interactive: true, otherwise "describedby"content:'auto',// matches `interactive` booleanexpanded:'auto',},// announce as a label rather than a description// the content will also be announced with `interactive: true`aria:{content:'labelledby',},// to abide by strict WCAG 2.1 rules with `interactive: true` to make it// hoverable if it's not actually interactive, but the content will still be// announcedaria:{content:'describedby',},// disable completely, left up to you to controlaria:{content:null,expanded:false,},});

#arrow

Determines if the tippy has an arrow.

tippy(targets,{// defaultarrow:true,// disable arrowarrow:false,// custom arrow stringarrow:'<svg>...</svg>',// custom arrow elementarrow:svgElement,});

Warning

A string is parsed as.innerHTML. Don't pass unknown user data to this prop.

To use the default round arrow, importroundArrow from the package(tippy.roundArrow in theumd version) and pass it as the value.

You must also importdist/svg-arrow.css when using SVG arrows for styling towork.

import tippy,{roundArrow}from'tippy.js';import'tippy.js/dist/svg-arrow.css';tippy(targets,{arrow:roundArrow,});

#content

The content of the tippy.

tippy(targets,{// defaultcontent:'',// stringcontent:'Hello',// Elementcontent:document.createElement('div'),// (reference) => string | Elementcontent:(reference)=>reference.getAttribute('title'),});

Note

To render strings as HTML, setallowHTML: true. This can open you up to XSSattacks, so be careful.

#delay

Delay in ms once a trigger event is fired before a tippy shows or hides.

tippy(targets,{// defaultdelay:0,// show and hide delay are 100msdelay:100,// show delay is 100ms, hide delay is 200msdelay:[100,200],// show delay is 100ms, hide delay is the defaultdelay:[100,null],});

#duration

Duration in ms of the transition animation.

tippy(targets,{// defaultduration:[300,250],// show and hide durations are 100msduration:100,// show duration is 100ms, hide duration is 200msduration:[100,200],// show duration is 100ms, hide duration is the defaultduration:[100,null],});

#followCursor

Determines if the tippy follows the user's mouse cursor.

tippy(targets,{// defaultfollowCursor:false,// follow on both x and y axesfollowCursor:true,// follow on x axisfollowCursor:'horizontal',// follow on y axisfollowCursor:'vertical',// follow until it shows (taking into account `delay`)followCursor:'initial',});

Plugin

When using modules (esm), you must import this plugin to use it.

import tippy,{followCursor}from'tippy.js';tippy(targets,{followCursor:true,plugins:[followCursor],});

#getReferenceClientRect

Used as the positioning reference for the tippy.

tippy(targets,{// default (uses the reference passed as first argument)getReferenceClientRect:null,// function that returns a ClientRect objectgetReferenceClientRect:()=>({width:100,height:100,left:100,right:200,top:100,bottom:200,}),});

#hideOnClick

Determines if the tippy hides upon clicking the reference or outside of thetippy. The behavior can depend upon thetrigger events used.

tippy(targets,{// defaulthideOnClick:true,// never hide upon clickinghideOnClick:false,// hide only upon clicking the reference, but not outsidehideOnClick:'toggle',});

hideOnClick: true withtrigger: "click":

hideOnClick: "toggle" withtrigger: "click":

hideOnClick: false withtrigger: "mouseenter" (aclick trigger will neverhide):

#ignoreAttributes

When using UI (component) libraries like React, this is generally not necessaryand slows down initialization perf a bit.

tippy(targets,{// defaultignoreAttributes:false,// don't consider `data-tippy-*` attributes on the reference elementignoreAttributes:true,});

#inertia

Determines if a (customizable) CSS spring-like animation is applied to thetransition animation.

Changing the show duration to a higher value makes this look better.

tippy(targets,{// defaultinertia:false,// enable itinertia:true,});

.tippy-box[data-inertia][data-state='visible']{transition-timing-function:cubic-bezier(...);}

#inlinePositioning

Provides enhanced support fordisplay: inline elements. It will choose themost appropriate rect based on the placement.

tippy(targets,{// defaultinlinePositioning:false,// enable itinlinePositioning:true,});

Plugin

When using modules (esm), you must import this plugin to use it.

import tippy,{inlinePositioning}from'tippy.js';tippy(targets,{inlinePositioning:true,plugins:[inlinePositioning],});

#interactive

Determines if the tippy has interactive content inside of it, so that it can behovered over and clicked inside without hiding.

tippy(targets,{// defaultinteractive:false,// enable itinteractive:true,});

Note

Whentrue, the tippy will be appended to thetargets parent element foraccessibility reasons by default. This means it can inherit styling, such astext-align: center. If you are experiencing issues with positioning, addappendTo: () => document.body to your props.

#interactiveBorder

Determines the size of the invisible border around the tippy that will preventit from hiding if the cursor left it.

tippy(targets,{// defaultinteractiveBorder:2,// 30pxinteractiveBorder:30,});

#interactiveDebounce

Determines the time in ms to debounce the interactive hide handler when thecursor leaves the tippy's interactive region.

Offers a temporal (rather than spacial) alternative tointeractiveBorder,although it can be used in conjunction with it.

tippy(targets,{// defaultinteractiveDebounce:0,// 75msinteractiveDebounce:75,});

#maxWidth

Specifies the maximum width of the tippy. Useful to prevent it from being toohorizontally wide to read.

tippy(targets,{// defaultmaxWidth:350,// no maxWidthmaxWidth:'none',});

Note

If the viewport's width is smaller thanmaxWidth, tippy's core CSS ensuresthe tippy remains smaller than the screen.

#moveTransition

Specifies the transition applied to the root positioned popper node. Thisdescribes the transition between "moves" (or position updates) of the popperelement when it e.g. flips or changes target location.

tippy(targets,{// defaultmoveTransition:'',// custom transitionmoveTransition:'transform 0.2s ease-out',});

#offset

Displaces the tippy from its reference element in pixels (skidding anddistance).

SeePopper's docs fordetails.

tippy(targets,{// default [skidding, distance]offset:[0,10],});

#onAfterUpdate

Invoked after the tippy has been updated (via.setProps()).

tippy(targets,{onAfterUpdate(instance,partialProps){// ...  },});

#onBeforeUpdate

Invoked before the tippy has been updated (via.setProps()).

tippy(targets,{onBeforeUpdate(instance,partialProps){// ...  },});

#onClickOutside

Invoked when the user clicks anywhere outside of the tippy or reference element.

tippy(targets,{onClickOutside(instance,event){// ...  },});

#onCreate

Invoked once the tippy has been created.

tippy(targets,{onCreate(instance){// ...  },});

#onDestroy

Invoked once the tippy has been destroyed.

tippy(targets,{onDestroy(instance){// ...  },});

#onHidden

Invoked once the tippy has been fully hidden and unmounted from the DOM.

tippy(targets,{onHidden(instance){// ...  },});

#onHide

Invoked once the tippy begins to hide.

tippy(targets,{onHide(instance){// ...  },});

You can optionallyreturn false from this lifecycle to cancel a hide basedon a condition.

#onMount

Invoked once the tippy has been mounted to the DOM (and the popperInstancecreated).

tippy(targets,{onMount(instance){// ...  },});

#onShow

Invoked once the tippy begins to show.

tippy(targets,{onShow(instance){// ...  },});

You can optionallyreturn false from this lifecycle to cancel a show basedon a condition.

#onShown

Invoked once the tippy has been fully transitioned in.

Note

Since this is achieved via CSStransitionend, it relies on your own eventlisteners if using a customrender function. You'll need to call thelifecycle manually in this case.

tippy(targets,{onShown(instance){// ...  },});

#onTrigger

Invoked once the tippy has been triggered by a DOM event (e.g.mouseenter).

tippy(targets,{onTrigger(instance,event){// ...  },});

#onUntrigger

Invoked once the tippy has been untriggered by a DOM event (e.g.mouseleave).

tippy(targets,{onUntrigger(instance,event){// ...  },});

#placement

Thepreferred placement of the tippy. Note that Popper'sflip modifier canchange this to the opposite placement if it has more space.

tippy(targets,{// defaultplacement:'top',// full list:placement:'top-start',placement:'top-end',placement:'right',placement:'right-start',placement:'right-end',placement:'bottom',placement:'bottom-start',placement:'bottom-end',placement:'left',placement:'left-start',placement:'left-end',// choose the side with most spaceplacement:'auto',placement:'auto-start',placement:'auto-end',});

#plugins

Plugins to use. SeePlugins for details.

Note

If usingtippy.setDefaultProps(), specifying default plugins causes thedefault plugins to be merged with plugins specified intippy() constructorcalls.

tippy(targets,{// defaultplugins:[],});

#popperOptions

Specifies custom Popper options. This gives you full control over the tippy'spositioning. SeePopper's docs for details.

tippy(targets,{// defaultpopperOptions:{},// detailed examplepopperOptions:{strategy:'fixed',modifiers:[{name:'flip',options:{fallbackPlacements:['bottom','right'],},},{name:'preventOverflow',options:{altAxis:true,tether:false,},},],},});

#render

Specifies a custom render function to use. This allows you to create your owntippy element DOM from scratch. Note that allrender (R) related props areentirely controlled by you when specifying a custom function.

SeeHeadless Tippy for details.

#role

Specifies therole attribute on the tippy element.

tippy(targets,{// defaultrole:'tooltip',});

#showOnCreate

Determines if the tippy is shown once it gets created, respectingdelay.

tippy(targets,{// defaultshowOnCreate:false,// enable itshowOnCreate:true,});

#sticky

Determines if the tippy sticks to the reference element while it is mounted.This is usuallynot needed, but is useful if the reference element's positionis animating, or to automatically update the tippy position without needing tomanually do it in certain cases where the DOM layout changes.

Note

This has a performance cost since checks are run on every animation frame. Usethis only when necessary!

tippy(targets,{// defaultsticky:false,// enable itsticky:true,// only check the "reference" rect for changessticky:'reference',// only check the "popper" rect for changessticky:'popper',});

Plugin

When using modules (esm), you must import this plugin to use it.

import tippy,{sticky}from'tippy.js';tippy(targets,{sticky:true,plugins:[sticky],});

#theme

Determines the theme of the tippy element. The core CSS defaults to a dark#333 theme. This can be overridden by a custom theme. SeeThemesfor details.

tippy(targets,{// defaulttheme:'',// custom themetheme:'tomato',});

#touch

Determines the behavior on touch devices.

tippy(targets,{// defaulttouch:true,// disable tippy from showing on touch devicestouch:false,// require pressing & holding the screen to show ittouch:'hold',// same as above, but long-press behaviortouch:['hold',500],});

#trigger

Determines the events that cause the tippy to show. Multiple event names areseparated by spaces.

tippy(targets,{// defaulttrigger:'mouseenter focus',// others:trigger:'click',trigger:'focusin',trigger:'mouseenter click',// only programmatically trigger ittrigger:'manual',});

#triggerTarget

The element(s) that the trigger event listeners are added to. Allows you toseparate the tippy's positioning from its trigger source.

tippy(targets,{// default (reference is used)triggerTarget:null,// ElementtriggerTarget:someElement,// Element[]triggerTarget:[someElement1,someElement2],});

#zIndex

Specifies thez-index CSS on the root popper node.

tippy(targets,{// defaultzIndex:9999,});