<div class="text-with-tooltip-cell">
    <div class="text-with-tooltip-cell__text">123</div>
    <button type="button" class="info-tooltip__toggle--small">
        <span class="visually-hidden"></span>
    </button>
    <div class="info-tooltip__html" data-info-tooltip-content-html="">
        <div class="responsive-table--first-column-mobile-full-height -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="">
                    </colgroup>
                    <thead>
                        <tr class="responsive-table__tr">
                            <th class="responsive-table__th">
                                Status
                            </th>
                            <th class="responsive-table__th is-right-aligned">
                                Anzahl
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="responsive-table__tr">
                            <td class="responsive-table__td">
                                <div class="responsive-table__td-inner-container">
                                    <div class="wysiwyg-content">
                                        <p>Bestellt</p>
                                    </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">Anzahl</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>
                        </tr>
                        <tr class="responsive-table__tr">
                            <td class="responsive-table__td">
                                <div class="responsive-table__td-inner-container">
                                    <div class="wysiwyg-content">
                                        <p>Geliefert</p>
                                    </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">Anzahl</div>
                                    </div>
                                    <div class="responsive-table__mobile-column">
                                        <div class="responsive-table__td-inner-container">
                                            <div class="wysiwyg-content">
                                                <p><strong>12</strong></p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr class="responsive-table__tr">
                            <td class="responsive-table__td">
                                <div class="responsive-table__td-inner-container">
                                    <div class="wysiwyg-content">
                                        <p>Offen</p>
                                    </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">Anzahl</div>
                                    </div>
                                    <div class="responsive-table__mobile-column">
                                        <div class="responsive-table__td-inner-container">
                                            <div class="wysiwyg-content">
                                                <p><strong>8</strong></p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr class="responsive-table__tr">
                            <td class="responsive-table__td">
                                <div class="responsive-table__td-inner-container">
                                    <div class="wysiwyg-content">
                                        <p>Storniert</p>
                                    </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">Anzahl</div>
                                    </div>
                                    <div class="responsive-table__mobile-column">
                                        <div class="responsive-table__td-inner-container">
                                            <div class="wysiwyg-content">
                                                <p><strong>0</strong></p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr class="responsive-table__tr">
                            <td class="responsive-table__td">
                                <div class="responsive-table__td-inner-container">
                                    <div class="wysiwyg-content">
                                        <p>Retouniert</p>
                                    </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">Anzahl</div>
                                    </div>
                                    <div class="responsive-table__mobile-column">
                                        <div class="responsive-table__td-inner-container">
                                            <div class="wysiwyg-content">
                                                <p><strong>3</strong></p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr class="responsive-table__tr">
                            <td class="responsive-table__td">
                                <div class="responsive-table__td-inner-container">
                                    <div class="wysiwyg-content">
                                        <p>in Retourenliste</p>
                                    </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">Anzahl</div>
                                    </div>
                                    <div class="responsive-table__mobile-column">
                                        <div class="responsive-table__td-inner-container">
                                            <div class="wysiwyg-content">
                                                <p><strong>1</strong></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="2">
                                <div class="wysiwyg-content">
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% include '@SharedComponents/modules/shared-account/components/cell-components/text-with-tooltip-cell/text-with-tooltip-cell.twig' %}
{
  "content": "123",
  "tooltipData": {
    "variant": "small",
    "html": true,
    "tableContent": {
      "spacingVariant": "medium",
      "notResponsive": true,
      "firstColumnMobileFullHeight": true,
      "columnDefs": [
        {
          "label": "Status",
          "name": "label"
        },
        {
          "label": "Anzahl",
          "name": "value",
          "thClass": "is-right-aligned"
        }
      ],
      "rowData": [
        {
          "label": {
            "type": "template",
            "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
            "data": {
              "content": "<p>Bestellt</p>"
            }
          },
          "value": {
            "tdClass": "is-right-aligned",
            "type": "template",
            "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
            "data": {
              "content": "<p><strong>20</strong></p>"
            }
          }
        },
        {
          "label": {
            "type": "template",
            "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
            "data": {
              "content": "<p>Geliefert</p>"
            }
          },
          "value": {
            "tdClass": "is-right-aligned",
            "type": "template",
            "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
            "data": {
              "content": "<p><strong>12</strong></p>"
            }
          }
        },
        {
          "label": {
            "type": "template",
            "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
            "data": {
              "content": "<p>Offen</p>"
            }
          },
          "value": {
            "tdClass": "is-right-aligned",
            "type": "template",
            "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
            "data": {
              "content": "<p><strong>8</strong></p>"
            }
          }
        },
        {
          "label": {
            "type": "template",
            "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
            "data": {
              "content": "<p>Storniert</p>"
            }
          },
          "value": {
            "tdClass": "is-right-aligned",
            "type": "template",
            "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
            "data": {
              "content": "<p><strong>0</strong></p>"
            }
          }
        },
        {
          "label": {
            "type": "template",
            "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
            "data": {
              "content": "<p>Retouniert</p>"
            }
          },
          "value": {
            "tdClass": "is-right-aligned",
            "type": "template",
            "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
            "data": {
              "content": "<p><strong>3</strong></p>"
            }
          }
        },
        {
          "label": {
            "type": "template",
            "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
            "data": {
              "content": "<p>in Retourenliste</p>"
            }
          },
          "value": {
            "tdClass": "is-right-aligned",
            "type": "template",
            "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
            "data": {
              "content": "<p><strong>1</strong></p>"
            }
          }
        }
      ]
    }
  }
}
  • Content:
    @import "~shared/base";
    @import "~cando-cx-components-library/components/modules/shared-account/components/cell-components/text-with-tooltip-cell/text-with-tooltip-cell";
  • URL: /components/raw/text-with-tooltip-cell/text-with-tooltip-cell.scss
  • Filesystem Path: src/components/modules/shared-account/components/cell-components/text-with-tooltip-cell/text-with-tooltip-cell.scss
  • Size: 170 Bytes

No notes defined.