浮动操作按钮文本到侧面

Question

I have been trying to add labels to the left of my FAB. I am liking the Material Design, but I am having an issue on getting the labels to appear properly. Any tips would be appreciated. Everything is displaying correctly except adding labels.

Here is a working example: http://codepen.io/petja/pen/OVRYMq

HTML

<div class="backdrop"></div>
<div class="fab child" data-subitem="1">
    <a href="tel:+121212121"><img alt="" src="images/smile.jpg"></a>
</div>
<div class="fab child" data-subitem="2">
    <a href="tel:+1212121212"><img alt="" src="about/smile.jpg"></a>
</div>
<div class="fab visible-xs float-phone" id="masterfab">
    <i class="fa icon-phone soft-white"></i>
</div>

CSS

.fab {
  background: #1C9E00;
  border-radius: 50%;
  text-align: center;
  color: #FFF;
  position: fixed;
  right: 70px;
  font-size: 25px;
  padding: 9px 2.5px 6px;
  -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .42));
}
.fab span {
  vertical-align: middle;
}
.fab.child {
  width: 53.666667px;
  height: 37.666667px;
  display: none;
  opacity: 0;
  background: transparent;
  border-radius: 0%;
  right: 63px;
  padding: 0;
}
.fab img {
  border-radius: 50%;
}
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FAFAFA;
  opacity: 0.7;
  display: none;
}

JS

$(function(){
    $(".fab,.backdrop").click(function(){
        if($(".backdrop").is(":visible")){
            $(".backdrop").fadeOut(125);
            $(".fab.child")
                .stop()
                .animate({
                    bottom  : $("#masterfab").css("bottom"),
                    opacity : 0
                },125,function(){
                    $(this).hide();
                });
        }else{
            $(".backdrop").fadeIn(125);
            $(".fab.child").each(function(){
                $(this)
                    .stop()
                    .show()
                    .animate({
                        bottom  : (parseInt($("#masterfab").css("bottom")) + parseInt($("#masterfab").outerHeight()) + 70 * $(this).data("subitem") - $(".fab.child").outerHeight()) + "px",
                        opacity : 1
                    },125);
            });
        }
    });
});

Answer 1

You want something like this?

There is .backdrop class in your css So, when I try to add materialize tooltipped it has same class name .backdrop which responsible to change background color of tooltip.

You added background: #ECECEC; in .backdrop So, tooltips had also same background color . So, I changed your .backdrop to .backdrop_gray and Now everything is fine.

HTML

<div class="backdrop_gray"></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am C" data-subitem="1"><span>C</span></div>

<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am B" data-subitem="2"><span>B</span></div>

<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am A" data-subitem="3"><span>A</span></div>

<div class="fab" id="masterfab"><span>+</span></div>
<h1>Floating Action Button</h1>
<p>(Hint: Button interacts with you)</p>

JS

$('.tooltipped').tooltip({delay: 50});
... // Your other JS.

Working Codepen

Answer 2

Check out this github issue

Github user philipraets created a nice codepen to demonstrate his soluton.

Edit (For the Lazy) :

philipraets created a simple css style:

.mobile-fab-tip {
    position: fixed;
    right: 85px;
    padding:0px 0.5rem;
    text-align: right;
    background-color: #323232;
    border-radius: 2px;
    color: #FFF;
    width:auto;
} 

then wrapped the tooltip within another link element using that style:

<div class="fixed-action-btn click-to-toggle" style="bottom:24px; right:24px;">
<a class="btn-floating btn-large red"><i class="large material-icons">settings</i></a>
    <ul>                                
        <li>
            <a href="#" class="btn-floating amber darken-1"><i class="material-icons">create</i></a>
            <a href="#" class="btn-floating mobile-fab-tip">Edit</a> <!--tooltip-->
        </li>                           
        <li>
            <a href="#" class="btn-floating blue"><i class="material-icons">event</i></a>
            <a href="#" class="btn-floating mobile-fab-tip">Save to calendar</a> <!--tooltip--> 
        </li>                               
        <li>
            <a href="#" class="btn-floating red modal-trigger"><i class="material-icons">supervisor_account</i></a>
            <a href="#" class="btn-floating mobile-fab-tip modal-trigger">Switch responsible</a> <!--tooltip-->
        </li>                               
    </ul>
</div>