A tooltip is a floating text area triggered by a user that provides helpful or contextual information.
A tooltip is used by wrapping an html element in the pf-tooltip element along with contextual information to be displayed alongside of the element.
Read more about tooltips in the PatternFly Elements Tooltip documentation
Load <pf-tooltip> via CDN:
<script src="https://jspm.dev/@patternfly/elements/pf-tooltip/pf-tooltip.js"></script>Or, if you are using NPM, install it
npm install @patternfly/elementsThen once installed, import it to your application:
import '@patternfly/elements/pf-tooltip/pf-tooltip.js';<pf-tooltip> This is An Element
<div slot="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et
ultrices.
</div>
</pf-tooltip><pf-tooltip position="left"> This is An Element
<div slot="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et
ultrices.
</div>
</pf-tooltip><pf-tooltip position="left" offset="10, 10">
<div>
This is An Element
</div>
<div slot="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.
</div>
</pf-tooltip>