Fijn

Circle component: Avatar 

<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-custom-class="-teamSelect">
    <i class="icon-plus"></i>

</div>

<div class="popover-content">

    <div class="m-searchInput">
        <span class="d-block d-xxxxl-none">
            <input type="search" class="form-control" id="search" placeholder="Zoeken">
        </span>
        <span class="d-none d-xxxxl-block">
            <input type="search" class="form-control" id="search" placeholder="Zoeken">
        </span>
        <i class=" icon-search cursor-pointer"></i>
    </div>
    <div class="m-teamSelect js-teamSelect">
        <i class="m-teamSelect__noresults">No matching results</i>
        <ul class="m-teamSelect__list js-teamSelectItems list-unstyled mb-0 mt-2">

            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                <div tabindex="0" class="a-avatar bg-default rounded-circle d-inline-flex justify-content-center align-items-center" ">
    MV
    
</div>

<span class=" pl-2">Marcella Vonk</span>
            </li>

            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                <div tabindex="0" class="a-avatar bg-turquoise rounded-circle d-inline-flex justify-content-center align-items-center" ">
    DW
    
</div>

<span class=" pl-2">Daniëlle van der Wei</span>
            </li>

            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                <div tabindex="0" class="a-avatar bg-pink rounded-circle d-inline-flex justify-content-center align-items-center" ">
    FA
    
</div>

<span class=" pl-2">Ferry van Asperen</span>
            </li>

            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                <div tabindex="0" class="a-avatar bg-green rounded-circle d-inline-flex justify-content-center align-items-center" ">
    IP
    
</div>

<span class=" pl-2">Isabel Pedersen</span>
            </li>

            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                <div tabindex="0" class="a-avatar bg-blue rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RG
    
</div>

<span class=" pl-2">Robert Giezen</span>
            </li>

            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                <div tabindex="0" class="a-avatar bg-orange rounded-circle d-inline-flex justify-content-center align-items-center" ">
    JT
    
</div>

<span class=" pl-2">Jappy Toering</span>
            </li>

            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                <div tabindex="0" class="a-avatar bg-lightgreen rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RV
    
</div>

<span class=" pl-2">Ruerd Visser</span>
            </li>

            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                <div tabindex="0" class="a-avatar bg-lightpink rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RW
    
</div>

<span class=" pl-2">Robin Woudstra</span>
            </li>

        </ul>
    </div>

</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": "plus",
  "size": "avatar",
  "color": "",
  "link": false,
  "disabled": false,
  "hover": true,
  "text": false,
  "popover_group": "",
  "popover_content": true,
  "elipse": false,
  "pointer": true,
  "toast": false,
  "placement": "bottom",
  "trigger": "click",
  "custom_class": "-teamSelect",
  "tooltip_html": "avatar"
}

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.