Tooltip

<p>Sharing documents has become significantly easier in the digital age. One of the most common and versatile file formats for this purpose is the <abbr tabindex="0" title="Portable Document Format">PDF</abbr>. Its ability to preserve formatting across different platforms makes it ideal for everything from resumes to complex reports. Whether you're sending a quick note or a lengthy manuscript, the format ensures your recipient sees exactly what you intended.</p>
<p>Data exchange between different systems is crucial in today's interconnected world. Often, this involves structured data formats, and one such format that plays a vital role is XML. Its flexibility and human-readable nature make it suitable for a wide range of applications, from configuration files to web services. While other formats exist, <abbr tabindex="0" title="Extendable Markup Language">XML</abbr> remains a powerful tool for representing and transmitting information</p>
<p>Rogue Squadron (1996) is the first novel in the Star Wars: X-wing series. It is set at the beginning of the New Republic <span class="health-references__links rs_preserve">(<span class="health-references__link" tabindex="0" aria-label="Reference" title="<p>Mike Murphy (May 25, 2017). &quot;The $11 million spent on &quot;Star Wars&quot; in 1977 was the best film investment ever made&quot;. Quartz. Archived from the original on June 6, 2017. Retrieved October 15, 2020.</p>">Mike Murphy</span>)</span>.</p>

<div tabindex="0" id="health-tooltip" class="health-tooltip">
    <div class="health-tooltip__arrow"></div>
    <div class="health-tooltip__content"></div>
</div>

<script language="JavaScript">
    $(document).ready(function() {
        health.tooltip(document.querySelectorAll('abbr, span[title]'));
    });
</script>

Tooltip

Tooltips use the FloatingUI library.

Usage

health.tooltip(selector, options)

Arguments

  • selector: {string|HTMLElement|NodeList} the element or elements to which the tooltip should be applied. When using a string then it must be a valid CSS selector string.
  • options: {object} tooltip options.
    • arrow: {boolean} If true, an arrow will be displayed between the tooltip and the triggering element. If false, no arrow will be displayed.
    • boundary: {string|Element|Array<Element>|Rect} Used to determine the boundary that the tooltip will be constrained to. See the FloatingUI documentation on the boundary property for more information on its usage.
    • closeButton: {boolean} If true, a close button will be displayed. If false, no close button will be displayed.
    • html: {string|null} Tooltip content. If not provided, the title attribute of the element will be used assuming it is present. If neither are present, the tooltip will be empty.
    • postProcess: {function} Anonymous function to be executed after the tooltip has been initialized. This can be used to perform post initialisation actions.
    • triggerOn: {string} Event or events which will trigger the display of the tooltip. Multiple events should be separated by a space.
    • triggerOff: {string} Event or events which will trigger the hiding of the tooltip. Multiple events should be separated by a space.

Default options

{
  arrow: false,
  boundary: 'clippingAncestors',
  closeButton: false,
  html: null,
  postProcess: () => {},
  triggerOn: 'mouseenter touchstart',
  triggerOff: 'blur mouseleave touchend',
}