2016-04-11 4 views
1

Я использую Materializecss для своего сайта, и я хотел бы отображать подсказки на маленьких кнопках действий всякий раз, когда пользователь нажимает кнопку большого действия. Materializecss показывает всплывающие подсказки только по умолчанию.Materializecss - Всегда показывать подсказки с кнопкой действия

Есть ли способ изменить это?

Спасибо

<li> <!-- Small button --> 
    <a class="btn-floating green tooltipped" data-position="left" data-delay="50" data-tooltip="Add friends"> 
     <i class="material-icons">add</i> 
    </a> 
</li> 

ответ

0

Проверить это github issue

GitHub philipraets пользователь создал хороший codepen, чтобы продемонстрировать свою soluton.

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> 
Смежные вопросы