Fijn

Circle component: Extra Small 

<div class="a-circle -xs -hover -border -pointer cursor-default">
    <i class="icon-arrow-left"></i>

</div>
 
{% if link == true %}<a href="" target="_blank"{% else %}<div{% endif %} class="a-circle{% if icon == 'download-alt' %} -download{% endif %}{% if icon == 'move' %} -move{% endif %}{% if icon == 'view' %} -view{% endif %} -{{size}}{% if elipse %} -elipse{% endif %}{% if hover %} -hover{% endif %}{% if color %} bg-{{color}}{% else %} -border{% endif %}{% if disabled %} -disabled{% endif %}{% if pointer %} -pointer{% endif %}{% if toast %} position-absolute close{% endif %} cursor-default" {% if tooltip_html %} tabindex="0" data-toggle="popover" data-container="body" data-placement="{{placement}}" data-trigger="{{trigger}}" data-html="true" title="" {% if popover_group %}data-popover-group="{{popover_group}}"{% endif %} data-custom-class="{{custom_class}}"{% if popover_content == false %} data-content="{{tooltip_html}}"{% endif %}{% endif %}{% if toast %} data-dismiss="toast" aria-label="Close"{% endif %}{% if datepicker %}data-toggle{% endif %}>
<i class="icon-{{icon}}"></i>
{% if circle_text %}<span class="ml-2 font-weight-normal text-muted">{{circle_text}}</span>{% endif %}
{% if link == true %}</a>{% else %}</div>{% endif %}
{% if popover_content %}
    <div class="popover-content">
        {% if tooltip_html=="avatar" %}
            {% render "@search-input", {label:"Zoeken"}, true %}{% render "@team-select" %}
        {% else %}
            {{tooltip_html | safe}}
        {% endif %}
    </div>
{% endif %}
 
{
  "icon": "arrow-left",
  "size": "xs",
  "color": "",
  "link": false,
  "disabled": false,
  "hover": true,
  "text": false,
  "popover_group": "",
  "popover_content": false,
  "elipse": false,
  "pointer": true,
  "toast": false
}

The circle link variant contains a link tag with a target blank instead of a div tag so the PDF will open in a new browser and can be viewed by the user.

The menu variant contains the .m-popoverMenu component inside the popover data-content attribute. Items inside this menu can have different states by setting these classes: -checked or -active. The checked state has grey background and checkmark, the active state only has a grey background.

Grouping popovers

Give all the popovers that need to be grouped the following attribute: data-popover-group="id_or_groupname". The attribute accepts any type of string but make sure all the popovers that need to be grouped have the same attribute value.