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类因此，当我尝试添加materialize工具提示时，它具有相同的类名.backdrop，它负责更改工具提示的背景颜色。

您在background: #ECECEC;中添加了.backdrop因此，工具提示也具有相同的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>

浮动操作按钮文本到侧面

2 个答案: