将操作按钮文本浮动到一侧

Question

我一直在尝试在我的 FAB 左侧添加标签。我喜欢 Material Design，但在让标签正确显示时遇到了问题。任何提示将不胜感激。除了添加标签外，一切都显示正确。

这是一个工作示例： 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

你想要这样的东西吗？

您的 css 中有 .backdrop 类因此，当我尝试添加物化工具提示时，它具有相同的类名 .backdrop 负责更改工具提示的背景颜色。

你在.backdrop 中添加了background: #ECECEC; 所以，工具提示也有相同的background color。所以，我将您的 .backdrop 更改为 .backdrop_gray 现在一切都很好。

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

看看这个github issue

Github 用户 philipraets 创建了一个不错的 codepen 来演示他的解决方案。

编辑（适合懒人）：

philipraets 创建了一个简单的 css 样式：

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

然后使用该样式将工具提示包装在另一个链接元素中：

<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>