Fijn

Avatar component: Brightpurple 

<div tabindex="0" class="a-avatar bg-brightpurple rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
    QR

</div>
 
<div tabindex="0" class="a-avatar{% if color %} bg-{{color}}{% endif %}{% if size %} -{{size}}{% endif %} rounded-circle d-inline-flex justify-content-center align-items-center" {% if tooltip_html %}data-toggle="popover" data-placement="{{placement}}" data-trigger="{{trigger}}" data-html="true" title=""{% if overflow_scroll_fix %}data-overflow-scroll-fix="true"{% endif %} {% if custom_class %}data-custom-class="{{custom_class}}"{% endif %}{% endif %} {% if tooltip_html == 'teammembers' %}data-content='{% render "@teamlist--vertical" %}'{% else %}{% if popover_content == false %}data-content="{{tooltip_html}}{% endif %}{% endif %}">
    {% if initials %}{{initials}}{% else %}MV{% endif %}
    {% if image %}<img src="{{ '/img/mv.jpg' | path }}" alt="Avatar" class="cover">{% endif %}
</div>
{% if popover_content %}
    <div class="popover-content">
        {{tooltip_html | safe}}
    </div>
{% endif %}
{% if text %}<span class="pl-2">{{text}}</span>{% endif %}
 
{
  "initials": "QR",
  "image": "",
  "tooltip_html": "",
  "tooltip_trigger": "",
  "color": "brightpurple",
  "menu": false,
  "placement": "top",
  "trigger": "hover",
  "custom_class": "",
  "size": "",
  "text": "",
  "popover_content": false
}

The menu variant contains an extra attribute: data-custom-class="-menu", important for applying the correct styling.

Cursor

By default the correct cursor style will be applied based on the data-trigger attribute, added by the Bootstrap popover. Based on this, the click and focus option will have a cursor pointer. When the popover is triggered by hover, the default cursor will be applied.

If a avatar is clickable in any other way the .cursor-pointer class should be added.