<div style="margin: 100px 300px;">
<button type="button" class="info-tooltip__toggle--small">
<span class="visually-hidden">Information</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html="">
<div class="info-tooltip__html-title"><strong>42</strong> Stück beim Lieferanten bestellt.</div>
<div class="responsive-table -spacing-medium -not-responsive">
<div class="responsive-table__container--auto-scrollbar">
<table class="responsive-table__table" data-responsive-table-filter-context>
<colgroup>
<col style="">
<col style="">
<col style="">
</colgroup>
<thead>
<tr class="responsive-table__tr">
<th class="responsive-table__th">
Datum
</th>
<th class="responsive-table__th is-right-aligned">
Menge
</th>
<th class="responsive-table__th is-left-aligned">
Bestätigt
</th>
</tr>
</thead>
<tbody>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Datum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>12.01.2021</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Menge</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p><strong>10</strong></p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-left-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestätigt</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Ja</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Datum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>17.06.2021</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Menge</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p><strong>20</strong></p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-left-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestätigt</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Ja</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Datum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>02.05.2021</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Menge</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p><strong>5</strong></p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-left-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestätigt</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Nein</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
<td class="responsive-table__td" colspan="3">
<div class="wysiwyg-content">
<p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{% include '@SharedComponents/modules/shared/components/info-tooltip/info-tooltip.twig' %}
{
"demo": true,
"variant": "small",
"html": true,
"title": "Information",
"content": "<strong>42</strong> Stück beim Lieferanten bestellt.",
"tableContent": {
"noMatchMessage": "Keine Ergebnisse gefunden",
"spacingVariant": "medium",
"notResponsive": true,
"columnDefs": [
{
"label": "Datum",
"name": "date"
},
{
"label": "Menge",
"name": "amount",
"thClass": "is-right-aligned"
},
{
"label": "Bestätigt",
"name": "confirmed",
"thClass": "is-left-aligned"
}
],
"rowData": [
{
"date": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>12.01.2021</p>"
}
},
"amount": {
"tdClass": "is-right-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p><strong>10</strong></p>"
}
},
"confirmed": {
"tdClass": "is-left-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Ja</p>"
}
}
},
{
"date": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>17.06.2021</p>"
}
},
"amount": {
"tdClass": "is-right-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p><strong>20</strong></p>"
}
},
"confirmed": {
"tdClass": "is-left-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Ja</p>"
}
}
},
{
"date": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>02.05.2021</p>"
}
},
"amount": {
"tdClass": "is-right-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p><strong>5</strong></p>"
}
},
"confirmed": {
"tdClass": "is-left-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Nein</p>"
}
}
}
]
}
}
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;
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;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/info-tooltip/info-tooltip";
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.