Materializecss - Always show tooltips with action button

问题

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?

Thank you

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

回答1:

Check out this github issue

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

Edit (For the Lazy):

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>

来源：https://stackoverflow.com/questions/36542634/materializecss-always-show-tooltips-with-action-button

标签

tooltip

materialize