ionic 2: Fab button with label - label

Question

I am building an app using ionic 2 following the documentation. I have implemented a fab button with a fab-list. I am trying to put a descriptive label next to the containing buttons. It seems that there is no way to put a label next to floating buttons with ionic 2 out of the box. I have looked to a couple questions about it on stackoverflow and on github.
It is strange that such a basic feature has not been implemented in ionic 2...
Is there an easy way to put a description label next to a floating button in ionic 2?
Thanks

Answer 1

This Worked For me Magnificently
<ion-fab bottom right>
<button ion-fab ><ion-icon name="add"></ion-icon></button>
<ion-fab-list side="top">
<button ion-fab >
<ion-icon name="logo-facebook"></ion-icon>
<div class="label">Facebook</div>
</button>
<button ion-fab >
<ion-icon name="logo-instagram"></ion-icon>
<div class="label" dir="rtl">Instagram </div>
</button>
<button ion-fab >
<ion-icon name="logo-twitter"></ion-icon>
<div class="label" dir="rtl">Twitter</div>
</button>
<button ion-fab >
<ion-icon name="logo-whatsapp"></ion-icon>
<div class="label" dir="rtl">Whatsapp</div>
</button>
</ion-fab-list>
</ion-fab>
CSS :
.fab {
contain: initial;
}
ion-fab {
ion-fab-list button[ion-fab] {
overflow: visible;
div.label {
position: absolute;
right: 48px;
background: rgba(0,0,0,0.7);
height: 24px;
line-height: 16px;
padding: 5px 8px;
border-radius: 3px;
color: #fff;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1);
}
}

Answer 2

Into the latest Ionic Framework you could show the labels for the IonFabButton as follows:
This is an Ionic-React example:
1. Paste the following into your corresponding .css file
ion-fab-button[data-desc] {
position: relative;
}
ion-fab-button[data-desc]::after {
position: absolute;
content: attr(data-desc);
z-index: 1;
right: 55px;
bottom: 4px;
background-color: var(--ion-color-light);
padding: 5px;
border-radius: 5px;
color: black;
box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
}
2. You need to use data-desc attribute of your IonFabButton to set the label
<IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton>
<IonIcon icon={add} />
</IonFabButton>
<IonFabList side="top">
<IonFabButton routerLink="/documents" data-desc="Upload Document">
<IonIcon icon={folderOpen} color="warning" />
</IonFabButton>
<IonFabButton routerLink="/leave" data-desc="Apply for Leave">
<IonIcon icon={calendarOutline} color="secondary" />
</IonFabButton>
<IonFabButton routerLink="/expenses" data-desc="New Expense">
<IonIcon icon={cardOutline} color="success" />
</IonFabButton>
<IonFabButton routerLink="/timesheet" data-desc="New Timesheet">
<IonIcon icon={timeOutline} color="primary" />
</IonFabButton>
</IonFabList>
</IonFab>