Skip to content react-bootstrap. HomeGetting StartedComponents. v2.2.1 (Bootstrap 5.1). Github Discord · Getting startedLayoutFormsComponents.
MenuGettingstartedLayoutFormsComponentsAlertsAccordionBadgeBreadcrumbButtonsButtonGroupCardsCarouselCloseButtonDropdownsFiguresImagesListGroupModalNavsNavbarOffcanvasOverlaysPaginationPlaceholderPopoversProgressSpinnersTableTabsTooltipsToastsUtilitiesMigratingAboutOverlaysAsetofcomponentsforpositioningbeautifuloverlays,tooltips,popovers,andanythingelseyouneed.Overview#ThingstoknowabouttheReact-BoostrapOverlaycomponents.Overlaysrelyonthethird-partylibraryPopper.js.
It'sincludedautomaticallywithReact-Bootstrap,butyoushouldreferencetheAPI
formoreadvancedusecases.Theand
componentsdonotpositionthemselves.Insteadthe(or)
components,injectrefandstyleprops.TooltipexpectsspecificpropsinjectedbythecomponentTooltipsfordisabledelementsmustbetriggeredonawrapperelement.Overlay#Overlayisthefundamentalcomponentforpositioningand
controllingtooltipvisibility.It'sawrapperaroundPopper.js,that
addssupportfortransitions,andvisibilitytoggling.CreatinganOverlay#Overlaysconsistofatleasttwoelements,the"overlay",theelementto
bepositioned,aswellasa"target",theelementtheoverlayis
positionedinrelationto.Youcanalsoalsohavean"arrow"element,
likethetooltipsandpopovers,butthatisoptional.Besureto
checkoutthePopper
documentationformoredetailsabouttheinjectedprops.functionExample(){
const[show,setShow]=useState(false);
consttarget=useRef(null);
return(
<>
setShow(!show)}>
Clickmetosee
{({placement,arrowProps,show:_show,popper,...props})=>(
Simpletooltip
)}
>
);
}
render();functionExample(){const[show,setShow]=useState(false);consttarget=useRef(null);
return(<>setShow(!show)}>Clickmetosee{({placement,arrowProps,show:_show,popper,...props})=>(Simpletooltip
)}>);}
render();CopyOverlayTrigger#Sincetheabovepatternisprettycommon,butverbose,we'veincluded
componenttohelpwithcommon
use-cases.Itevenhasfunctionalitytodelayedshoworhides,andafew
different"trigger"eventsyoucanmixandmatch.Notethattriggeringcomponentsmustbeabletoacceptaref
sincewillattempttoaddone.Youcanuse
forwardRef()forfunctioncomponents.constrenderTooltip=(props)=>(
Simpletooltip
);
render(
Hovermetosee
,
);constrenderTooltip=(props)=>(Simpletooltip);
render(Hovermetosee,);CopyCustomizingtriggerbehavior#Formoreadvancedbehaviorsacceptsa
functionchildthatpassesintheinjectedrefandevent
handlersthatcorrespondtotheconfiguredtriggerprop.Youcanmanuallyapplythepropstoanyelementyouwantorsplitthem
up.Theexamplebelowshowshowtopositiontheoverlaytoadifferent
elementthantheonethattriggersitsvisibility.ProTip:UsingthefunctionformofOverlayTriggeravoidsaReact.findDOMNodecall,forthosetryingtobestrictmodecompliant.render(
Checkoutthisavatar}
>
{({ref,...triggerHandler})=>(
)}
,
);render(Checkoutthisavatar}>{({ref,...triggerHandler})=>(Hovertosee)},);CopyTooltips#Atooltipcomponentforamorestylishalternativetothatanchortagtitleattribute.Examples#Hoveroverthelinksbelowtoseetooltips.YoucanpasstheOverlayinjectedpropsdirectlytothe
Tooltipcomponent.functionExample(){
const[show,setShow]=useState(false);
consttarget=useRef(null);
return(
<>
setShow(!show)}>
Clickme!
{(props)=>(
MyTooltip
)}
>
);
}
render();functionExample(){const[show,setShow]=useState(false);consttarget=useRef(null);
return(<>setShow(!show)}>Clickme!{(props)=>(MyTooltip)}>);}
render();CopyOrpassaTooltipelementtoOverlayTriggerinstead.<>
{['top','right','bottom','left'].map((placement)=>(
Tooltipon{placement}.
}
>
Tooltipon{placement}
))}
><>{['top','right','bottom','left'].map((placement)=>(Tooltipon{placement}.}>Tooltipon{placement}))}>CopyPopovers#Apopovercomponent,likethosefoundiniOS.Examples#constpopover=(
Popoverright
Andhere'ssomeamazingcontent.It'sveryengaging.
right?
);
constExample=()=>(
Clickmetosee
);
render();constpopover=(PopoverrightAndhere'ssomeamazingcontent.It'sveryengaging.right?);
constExample=()=>(Clickmetosee);
render();CopyAswiths,youcancontroltheplacementofthePopover.<>
{['top','right','bottom','left'].map((placement)=>(
{`Popover${placement}`}
Holyguacamole!Checkthisinfo.
}
>
Popoveron{placement}
))}
><>{['top','right','bottom','left'].map((placement)=>({`Popover${placement}`}Holyguacamole!Checkthisinfo.}>Popoveron{placement}))}>CopyDisabledelements#Elementswiththedisabledattributearen’tinteractive,
meaninguserscannothoverorclickthemtotriggerapopover(or
tooltip).Asaworkaround,you’llwanttotriggertheoverlayfroma
wrapperor
andoverridethepointer-eventsonthe
disabledelement.Tooltip!}>
Disabledbutton
Tooltip!}>DisabledbuttonCopyChangingcontainers#YoucanspecifyacontainertocontroltheDOMelementthe
overlayisappendedto.Thisisespeciallyusefulwhenstylesconflict
withyourOverlays.functionExample(){
const[show,setShow]=useState(false);
const[target,setTarget]=useState(null);
constref=useRef(null);
consthandleClick=(event)=>{
setShow(!show);
setTarget(event.target);
};
return(
Holyguacamole!
Popoverbottom
Holyguacamole!Checkthisinfo.
Youcanuseacustomelementtypeforthiscomponent.bsPrefixrequiredstring'popover-body'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.PopoverHeader#viewsourcefileimportPopoverHeaderfrom'react-bootstrap/PopoverHeader'CopyimportcodeforthePopoverHeadercomponentNameTypeDefaultDescriptionaselementType
Youcanuseacustomelementtypeforthiscomponent.bsPrefixrequiredstring'popover-header'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.
