Fijn

Avatar component: Tooltip 

<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="&lt;small class=&#39;d-block text-center&#39;&gt;&lt;strong&gt;Marcella Vonk&lt;/strong&gt;&lt;br&gt;&lt;span class=&#39;text-muted&#39;&gt;Accountmanager&lt;/span&gt;&lt;/small&gt;">
    MV

</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": "MV",
  "image": "",
  "tooltip_html": "<small class='d-block text-center'><strong>Marcella Vonk</strong><br><span class='text-muted'>Accountmanager</span></small>",
  "tooltip_trigger": "",
  "color": "brown",
  "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.