Tooltip

With this component a simple text tooltip or a tooltip with complex html can easily be attached to an element.

Depending on which method you use (text only or with HTML) you have to use different required data attributes (data-sg-tooltip, data-sg-tooltip-ref, data-sg-tooltip-id). See more on this in the corresponding chapters below.

There are several optional data attributes, that help customize the behavior of the tooltip:

• data-sg-tooltip-boundary this attribute could be set on a container HTML element to define a region, within the tooltip should be shown, for example the .page-content
• data-sg-tooltip-open-by this attribute change the open behavior of the tooltip. Possible values are:
  • event: the tooltip will not open while hover the reference element, it must be open by the developer via scripting, see the example below
  • NUMBER: the tooltip will open with a delay that is the same to the number in ms
• data-sg-tooltip-close-by this attribute change the close behavior of the tooltip. Possible values are:
  • event: the tooltip will not close automatically, it must be closed by the developer via scripting, see the example below
  • mouseout: the tooltip will close after the user leave the tooltip with the mouse (dehover)
  • click-outside: the tooltip will close while click outside the tooltip
• data-sg-tooltip-placement this attribute can be used to determine the position at which the tooltip should be placed. Possible values are:
  • top
  • top-start
  • top-end
  • right
  • right-start
  • right-end
  • bottom
  • bottom-start (default)
  • bottom-end
  • left
  • left-start
  • left-end
• data-sg-tooltip-show-arrow="false" do not show an arrow
• data-sg-tooltip-strategy="fixed" this attribute change the CSS position. Possible values are “absolute” (default) and “fixed”.

Tooltips are normally closed when the reference element is no longer hovered with the mouse. Also you can close the tooltip by clicking somewhere else on the page or by using the escape key. On touch devices, the tooltip is displayed when you touch the reference element and it closes in the same way.

Special is when you use the data-sg-tooltip-close-by="event" data attribute. If this attribute is set, closing is only possible with a click somewhere else on the page or per escape key. You can also use a JavaScript command to trigger the closing of the tooltip. Use the styleGuide.tooltipHandler.hide(tooltip) function and pass the tooltip HTML element.

const tooltip = document.querySelector('...');
styleGuide?.tooltipHandler?.hide(tooltip);

Internally we use the external library https://floating-ui.com/.

Text Only

Add the data attribute data-sg-tooltip="some text" to an element and the scripting will make a tooltip out of it, which will be attached to the element.

With HTML Content

In order to add a tooltip with complex HTML to an element, you must first create the tooltip (e.g. a div) and its inner HTML. Then connect the tooltip to the reference element where it should be attached by using the follow data attributes:

• The tooltip needs the two data attributes data-sg-tooltip and data-sg-tooltip-id="UNIQUE_ID"
• The reference element needs the data attribute data-sg-tooltip-ref="UNIQUE_ID"
• This “UNIQUE_ID” must be the same value

Code Example

<p data-sg-tooltip-ref="tooltip-1">Reference Element</p>
<p class="tooltip" data-sg-tooltip data-sg-tooltip-id="tooltip-1">Tooltip</p>

Login

The following example shows the login popup from finanzen.net. The opening of the login tooltip has a small delay.

JavaScript

The behavior of the tooltips can be customized using the data attributes data-sg-tooltip-open-by="event" and data-sg-tooltip-close-by="event". The tooltip handler class offers several functions for customized behavior:

• styleGuide.tooltipHandler.show(tooltip: HTMLElement): void
• styleGuide.tooltipHandler.hide(tooltip: HTMLElement): void
• styleGuide.tooltipHandler.toggle(tooltip: HTMLElement, force?: boolean): void
• styleGuide.tooltipHandler.isShown(tooltip: HTMLElement): boolean

Open By

Tooltips are normally open when the reference element is hovered with the mouse. On touch devices, the tooltip is displayed when you touch the reference element.

Special is when you use the data-sg-tooltip-open-by="event" data attribute. If this attribute is set, opening is only possible over a custom scripting. Use the JavaScript command styleGuide.tooltipHandler.show(tooltip) function and pass the tooltip HTML element.

Close By

Tooltips are normally closed when the reference element is no longer hovered with the mouse. Also you can close the tooltip by clicking somewhere else on the page or by using the escape key. On touch devices, the tooltip is displayed when you touch the reference element and it closes in the same way.

Special is when you use the data-sg-tooltip-close-by="event" data attribute. If this attribute is set, closing is only possible with a click somewhere else on the page or per escape key. You can also use a JavaScript command to trigger the closing of the tooltip. Use the styleGuide.tooltipHandler.hide(tooltip) function and pass the tooltip HTML element.

const tooltip = document.querySelector('...');
styleGuide?.tooltipHandler?.hide(tooltip);

Observer Pattern

The TooltipHandler implements the observer pattern, which allows you to listen for a tooltip’s state change.

type Tooltip = TComponent;
type TooltipRef = TComponent;
type TooltipState = { tooltip: Tooltip, refElement: TooltipRef, isShown: boolean }

/**
 * simplified excerpt from tooltip-handler.ts
 */
class TooltipHandler extends Subject<TooltipState> {
  // ...
  show(tooltip: Tooltip): void {
    // do stuff to open tooltip
    this.notifyObserver(tooltip, refElement, true);
  }

  notifyObserver(tooltip: Tooltip, refElement: TooltipRef, isShown: boolean): void {
    this.notify({ tooltip, refElement, isShown });
  }
  // ...
}

In the following example we show how to close a context tooltip with the close button, how to show and hide a tooltip by typing in a text field, and how to create an observer for the two examples.