OFRAG Frontend Components Library v0.0.0

Info Tooltip: Large 

<div style="margin: 100px 300px;">
      <button type="button" class="info-tooltip__toggle--large" data-info-tooltip-content="Lorem ipsum dolor sit amet">
          <span class="visually-hidden">Information</span>
      </button>
  </div>
 
{% include '@SharedComponents/modules/shared/components/info-tooltip/info-tooltip.twig' %}
 
{
  "demo": true,
  "variant": "large",
  "title": "Information",
  "content": "Lorem ipsum dolor sit amet"
}
  • Content: 
    import InfoTooltipMediator, {name as title} from 'cando-cx-components-library/components/modules/shared/components/info-tooltip/info-tooltip-mediator';

export default InfoTooltipMediator;
export const name = title;
  • URL: /components/raw/info-tooltip/info-tooltip-mediator.js
  • Filesystem Path: src/components/modules/shared/components/info-tooltip/info-tooltip-mediator.js
  • Size: 215 Bytes
  • Content: 
    import './info-tooltip.scss';
import InfoTooltip, {selector as sel} from 'cando-cx-components-library/components/modules/shared/components/info-tooltip/info-tooltip';

export default InfoTooltip;
export const selector = sel;
  • URL: /components/raw/info-tooltip/info-tooltip.js
  • Filesystem Path: src/components/modules/shared/components/info-tooltip/info-tooltip.js
  • Size: 224 Bytes
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/info-tooltip/info-tooltip";
  • URL: /components/raw/info-tooltip/info-tooltip.scss
  • Filesystem Path: src/components/modules/shared/components/info-tooltip/info-tooltip.scss
  • Size: 126 Bytes

Custom Usage

To use the info tooltip component with a custom toggle component let’s take the following example:

<button type="button" class="custom-toggle" data-info-tooltip-content="'Content lorem ipsum'"><span class="visually-hidden">Open tooltip</span></button>

or with HTML content:

<button type="button" class="custom-toggle">
  <span class="visually-hidden">Open tooltip</span>
</button>
<span class="info-tooltip__html" data-info-tooltip-content-html><strong>Content</strong> lorem ipsum</span>

Required is the data-info-tooltip-content respectively the data-info-tooltip-content-html attribute.

You then need to call the mediator with the toggle DOM element as constructor arguments. Also, call the .init() method.

That’s it. Happy hacking.