<div id="syncprogress"
    [class.active] = "connected && objectsToSyncIds.length > 0"></div>

<div id="objectsToSyncCount"
     [class.connected] = "connected && objectsToSyncIds.length === 0"
     [class.unconnected] = "!connected || objectsToSyncIds.length > 0">
    <div id="syncCounter"
         *ngIf="objectsToSyncIds.length > 0">
        <span id="syncSymbol" class="mdi mdi-cloud-upload"></span>
        {{objectsToSyncIds.length}}
    </div>

    <div
        *ngIf="connected && objectsToSyncIds.length === 0">
        <span id="success" class="mdi mdi-check"></span>
    </div>
</div>
<div id="syncprogress"
    [class.active] = "connected && objectsToSyncIds.length > 0"></div>

<div id="objectsToSyncCount"
     [class.connected] = "connected && objectsToSyncIds.length === 0"
     [class.unconnected] = "!connected || objectsToSyncIds.length > 0"
     data-toggle="tooltip" title="{{objectsToSyncIds.length}} unsynced objects">
    <div id="syncCounter"
         *ngIf="objectsToSyncIds.length > 0">
        <span id="syncSymbol"
              class="mdi mdi-cloud-upload"></span>
        {{objectsToSyncIds.length}}
    </div>

    <div
        *ngIf="connected && objectsToSyncIds.length === 0">
        <span data-toggle="tooltip"
              title="All objects are synced"
              id="success"
              class="mdi mdi-check"></span>
    </div>
</div>
Add tooltips to explain sync status.
Add tooltips to explain sync status.
