Плавающая кнопка действия Текст в сторону

Question

Я пытаюсь добавить ярлыки слева от моего FAB. Мне нравится дизайн материалов, но у меня возникла проблема с тем, чтобы ярлыки отображались правильно. Любые советы будут оценены. Все отображается правильно, кроме добавления меток.

Вот рабочий пример: 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

Вы хотите что-то вроде этого?

Существует .backdrop класса в вашем CSS Так что, когда я пытаюсь добавить материализуюсь tooltipped имеет имя же класс .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 user philipraets создал красивый кодекс, чтобы продемонстрировать свой солетон.

Edit (для ленивых):

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>