Barmer Fractal

Button: Tooltip 

<button class="a-btn js-has-tooltip" type="button" data-tooltip-text="Tooltip text"><span class="sr-only">Tooltip</span><i class="a-icon icon--help-circle" aria-hidden="true"></i></button>
 
{{^ switches.asLink }}
  <button class="a-btn {{viewtypes.specifier}}" type="{{content.type}}" {{{content.attributes}}} {{{content.dataAttributes}}} {{#if content.title}} title="{{content.title}}"{{/if}} {{#if content.ariaHidden}}aria-hidden="{{content.ariaHidden}}"{{/if}} {{#if content.ariaLabel}}aria-label="{{content.ariaLabel}}"{{/if}}{{#if content.ariaHasPopup}} aria-haspopup="{{content.ariaHasPopup}}"{{/if}}{{#if content.ariaExpanded}} aria-expanded="{{content.ariaExpanded}}"{{/if}}{{#if content.ariaControls}} aria-controls="{{content.ariaControls}}"{{/if}}{{#if content.ariaLabelledBy}} aria-labelledby="{{content.ariaLabelledBy}}"{{/if}}{{#switches.isDisabled}} disabled="disabled"{{/switches.isDisabled}}{{#if content.dataService}} data-service="{{content.dataService}}"{{/if}} {{#if content.dataTooltipText}}data-tooltip-text="{{content.dataTooltipText}}"{{/if}} {{#switches.isHidden}} hidden{{/switches.isHidden}} {{{content.function}}}>{{{content.before}}}{{content.label}}{{{content.after}}}{{#switches.hasIcon}}{{render (stringToPartial partials.iconType) partials.icon merge=true}}{{/switches.hasIcon}}</button>
{{/ switches.asLink}}
{{# switches.asLink }}
	<a class="a-btn {{viewtypes.specifier}}"
      href="{{content.url}}"
      title="{{content.title}}"
      {{#if switches.newWindow}}target="_blank"{{/if}}
      {{#if content.dataService}}data-service="{{content.dataService}}"{{/if}}
      {{# switches.hasDownload }}download="{{content.downloadTitle}}"{{/ switches.hasDownload}}
  >
    {{# switches.hasDownload }}
        <span class="sr-only">{{content.srDownload}}{{{content.srDownloadTitle}}}</span>
    {{/ switches.hasDownload }}
    {{{content.before}}}{{content.label}}{{{content.after}}}{{#switches.hasIcon}}{{render (stringToPartial partials.iconType) partials.icon merge=true}}{{/switches.hasIcon}}
  </a>
{{/ switches.asLink}}
 
{
  "switches": {
    "asLink": false,
    "hasIcon": true,
    "isDisabled": false
  },
  "viewtypes": {
    "specifier": "js-has-tooltip"
  },
  "content": {
    "type": "button",
    "before": "<span class=\"sr-only\">",
    "label": "Tooltip",
    "after": "</span>",
    "url": "",
    "function": "",
    "dataTooltipText": "Tooltip text"
  },
  "partials": {
    "iconType": "icon--help-circle"
  }
}

No notes defined.