Question

我在我的网站上使用Materialisecss，并且当用户按下大动作按钮时，我想在较小的动作按钮上显示工具提示。 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创建了一个很好的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>

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

1 个答案: