Materializecss - 始终显示带有操作按钮的工具提示

Question

我正在为我的网站使用 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>

Answer 1

看看这个github issue

Github 用户 philipraets 创建了一个很好的代码笔来演示他的解决方案。

编辑（懒人）：

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

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

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

Materializecss - 始终显示带有操作按钮的工具提示

Materializecss - Always show tooltips with action button

tooltip

materialize