<span
  class="user-name-info"
  data-test-user-name-info
  ...attributes
>
  <span data-test-fullname>{{@user.fullName}}</span>
  {{#if @user.pronouns}}
    <span data-test-pronouns>({{@user.pronouns}})</span>
  {{/if}}
  {{#if @user.hasDifferentDisplayName}}
    <span
      data-test-info
      {{did-insert (set this.theElement)}}
      {{mouse-hover-toggle this.toggleUsernameInfoHover}}
    >
      <FaIcon
        @icon="circle-info"
        aria-label={{t "general.campusNameOfRecord"}}
        class="info"
      />
      {{#if this.isHoveringOverUsernameInfo}}
        <IliosTooltip @target={{this.theElement}}>
          <strong>{{t "general.campusNameOfRecord"}}:</strong>
          {{@user.fullNameFromFirstMiddleLastName}}
        </IliosTooltip>
      {{/if}}
    </span>
  {{/if}}
</span>
