Materialize: FAB mobile improvements - active timeout & auto-tooltips

Created on 20 Mar 2015  路  12Comments  路  Source: Dogfalo/materialize

On mobile, i think the fab menu should:

auto-collapse children after a fixed timeout period. i.e. 3 seconds. This means the user avoids having to click somewhere else on the page (which in my app, creates issues as it triggers events on other components to fire).

We should have the option to auto-display tooltips on fab menu children items. This is because there is no hover event on mobile.

thanks

Accessibility enhancement

Most helpful comment

I have created a different implementation which only requires css and tootlips are clickable:
basically i use a-tags for the tooltips and style them, advantages are that the tooltips are clickable so you can apply the same action to it, and they have the same animation.

codepen:

http://codepen.io/anon/pen/rxMXob

All 12 comments

+1

Any progress on this? could really use it :)

Any updates?

I may have a fix for this, if anyone is interested I can put it in a codepen and post it. It's a bit of a hack job but it does the trick.

Please re-open this.
In mobile there is not a hover event.

It is open...

thanks for putting that together @cstamant !

I have created a different implementation which only requires css and tootlips are clickable:
basically i use a-tags for the tooltips and style them, advantages are that the tooltips are clickable so you can apply the same action to it, and they have the same animation.

codepen:

http://codepen.io/anon/pen/rxMXob

@philipraets, that's a great solution! @Dogfalo you should implement that.

This works well for me:

.fixed-action-btn ul > li > span {
    position: absolute;
    right: 100%;
    white-space: nowrap;
    background: rgba(0,0,0,.6);
    padding: 3px 9px;
    color: white;
    margin-top: 4px;
}

<div class="fixed-action-btn click-to-toggle" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large blue lighten-2">
        <i class="large fa fa-bars"></i>
    </a>
    <ul>
        <li>
            <span>I am text</span>
            <a class="btn-floating green">+</a>
        </li>
    </ul>
</div>

The solution from @davidbielik works great but only with vertical default buttons.
Thank you.

Anyway, it's a shame it doesn't exist a default option for this.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

serkandurusoy picture serkandurusoy  路  3Comments

alexknipfer picture alexknipfer  路  3Comments

artur99 picture artur99  路  3Comments

ericlormul picture ericlormul  路  3Comments

cope picture cope  路  3Comments