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

问题描述

我正在为我的网站使用Materializecss，并且每当用户按下较大的操作按钮时，我都希望在较小的操作按钮上显示工具提示. Materializecss默认情况下仅在悬停时显示工具提示.

I am using Materializecss for my website and I'd like to display tooltips on the smaller action buttons whenever the user presses the big action button. Materializecss shows tooltips only on hover by default.

有没有办法改变这一点?

Is there a way to change this?

谢谢

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

推荐答案

查看此 github问题

Github用户philipraets创建了一个不错的codepen来演示他的解决方案.

Github user philipraets created a nice codepen to demonstrate his soluton.

编辑(对于懒惰者):

philipraets创建了一个简单的CSS样式:

philipraets created a simple css style:

.mobile-fab-tip {
    position: fixed;
    right: 85px;
    padding:0px 0.5rem;
    text-align: right;
    background-color: #323232;
    border-radius: 2px;
    color: #FFF;
    width:auto;
} 

然后使用该样式将工具提示包装在另一个链接元素中:

then wrapped the tooltip within another link element using that style:

<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-始终显示带有操作按钮的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！