Tooltip

Concept

The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button's function, or other such information.

Normally, a browser will display the "title" attribute as a tooltip. This will however normally not be displayed upon pressing on mobile devices. Another difference is, the way the tooltip is rendered cannot be styled.

OpenACS provides a tooltip implementation designed to not require external dependencies.

Usage

First of all, add the css and js files to the page.

    <link rel="stylesheet" href="/resources/acs-templating/tooltip.css">
    <script src="/resources/acs-templating/tooltip.js"></script>
  

If you plan to create tooltip elements dynamically on the page, also remember to invoke the tooltip function on the new element(s):

    <script>
       acsTooltip('#my-new-element-selector');
    </script>
  

acsTooltip accepts a multi-items query selector as argument. For elements present on the page at page load, invoking the function is not necessary.

Default tooltip

The default tooltip orientation is below the parent element.

    <div class="acs-tooltip">Default Tooltip<span class="acs-tooltip-text">I default to the bottom.</span></div>
  

Example:

Default TooltipI default to the bottom.

Bottom-oriented tooltip

The bottom orientation can also be specified explicitly.

    <div class="acs-tooltip bottom">Bottom<span class="acs-tooltip-text">Bottom Tooltip</span></div>
  

Example:

BottomBottom Tooltip

Top-oriented tooltip

    <div class="acs-tooltip top">Top<span class="acs-tooltip-text">Top Tooltip</span></div>
  

Example:

TopTop Tooltip

Left-oriented tooltip

    <div class="acs-tooltip left">Left<span class="acs-tooltip-text">Left Tooltip</span></div>
  

Example:

LeftLeft Tooltip

Right-oriented tooltip

    <div class="acs-tooltip right">Right<span class="acs-tooltip-text">Right Tooltip</span></div>
  

Example:

RightRight Tooltip

Enhance the vanilla title behavior

One can also specify the tooltip using the title attribute. This will support HTML as well. Note that the original title attribute will be removed from the item.

    <div class="acs-tooltip" title="Tooltip via the <b>title</b> attribute">Title</div>
  

Example:

Title

Tooltip visibility

If the tooltip orientation would bring the element to be displayed outside the page viewport, it will fallback to the bottom one.

    <div class="acs-tooltip left">Long text with righ-side tooltip
       <span class="acs-tooltip-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.
       </span>
    </div>
  

Example: