User Hover Card | Axero Documentation

The hover card is displayed when you hover over a person's name.

You can customize the hover card in the Control Panel.

1. Click the gear icon > Control Panel > People > User Profiles > User hover card.
2. Edit the template.
   • Use the Insert token menu to add user profile fields. To add a system resource, start typing under Insert resource then click the resource. Tokens and resources are added where your blinking cursor is.
3. Click Save.

Example: Adding the Reports to field to the user hover card template

1. In the editor, copy <div class="user-prop">{{{field:Email}}}</div> .
2. After <div class="user-prop">{{{field:City}}}{{#if ||field:City||}}{{#if ||field:State||}}, {{/if}}{{/if}}{{{field:State}}}</div> , hit enter and paste.
3. In the new line, delete {{{field:Email}}} .
4. In its place, type Reports to: .
5. Keep the cursor in front of < (the left angled bracket).
6. In the Insert token menu, select Reports to. {{{field:Reports to}}} is added where the cursor is.
7. Click Save.

Result:

Template Syntax

See Page Builder Template Language Syntax for more details about template syntax.

Default User Hover Card Template

Below is the default user hover card template, for your reference.

<div class="ax-usr-card">
    <div class="ax-usr-card-header" style="background: url('{{{field:Cover photo}}}') no-repeat center center / cover ">
    </div>
    <div class="ax-usr-card-body">
        <div class="ax-usr-card-avatar">
            <i title="{{ChatStatusText}}" class="icon-circle {{ChatStatusCSSClass}}"></i>
            <a href="{{{ProfileURL}}}"><img src="{{{field:Profile photo}}}" class="avatar" alt=""/></a>
        </div>
        <div class="user-info">
            <div class="user-name"><a href="{{{ProfileURL}}}">{{{UserInfoDisplayName}}}</a></div>
			{{#if RankName}}
            <div class="user-prop user-rank">
                <img src="{{{RankImageURL}}}" class="rank-image" /><span class="rank-name">{{{RankName}}}</span>
            </div>
			{{/if}}
            <div class="user-prop">{{{field:Email}}}</div>
            <div class="user-prop">{{{field:Phone}}}</div>
            <div class="user-prop">{{{field:Occupation}}}{{#if ||field:Occupation||}}{{#if ||field:Department||}} - {{/if}}{{/if}}{{{field:Department}}}</div>
            <div class="user-prop">{{{field:City}}}{{#if ||field:City||}}{{#if ||field:State||}}, {{/if}}{{/if}}{{{field:State}}}</div>
        {{#if CanBeConnectedInMSTeams}}<div class="user-prop"><a href="https://teams.microsoft.com/l/chat/0/0?users={{Email}}" target="_blank" class="axero-connectInTeams"><i class="msTeamsIcon"></i> <span class="btn-text">{{Resource.ConnectInTeamsText}}</span></a></div>{{/if}}
        </div>
    </div>
	{{#if (or CanChat IsProfilePublic)}}
    <div class="ax-usr-card-footer">
        {{#if CanChat}}<a id="MessageButton" class="btn" type="button" target="_blank" href="{{SiteURL}}/chat/user/{{UserID}}">{{Resource.GlobalMessageText}}</a>{{/if}}
        {{#if IsProfilePublic}}<a class="btn" href="{{{ProfileURL}}}">{{Resource.ViewProfileText}}</a>{{/if}}
    </div>
	{{/if}}
</div>