Display Fab action tooltips on open

[dgk]

In other android apps I use when a fab is opened the fab actions display their tooltips automatically (at least on mobile devices). This make sense as there is no “hover” on a touch screen and displaying a bunch of icons isn’t going to help the user figure out the choices especially if no icon is appropriate to the task (my case for sure)

So since fab action has no open event but fab does I tried this. Sadly all the tooltips appear at the fab button (on top of each other) instead of next to each fab action icon/button

Any suggestion on how to get this to work. I guess I could fiddle with offsets of each tooltip but that seems klunky. @rstoenescu the fab action should probably have it’s own open event which would probably solve this.

<q-fixed-position corner="bottom-right" :offset="[18, 18]">
<q-fab
  color="primary"
  icon="fa-list"
  active-icon="fa-list-alt"
  direction="up"
  @open="$refs.fabtp.open()"
>
  <q-fab-action color="secondary" @click="filterSwitches('favorites')" icon="fa-heart">
    <q-tooltip ref="fabtp" anchor="center left" self="center right" :offset="[0, 0]">Favorites</q-tooltip>
  </q-fab-action>
  <q-fab-action color="secondary" @click="filterSwitches('all')" icon="fa-list-ul">
    <q-tooltip ref="fabtp" anchor="center left" self="center right" :offset="[0, 0]">All</q-tooltip>
  </q-fab-action>
</q-fab>
</q-fixed-position>

[rstoenescu]

Hi,

Can you open a github ticket requesting this please? This will get implemented.

Thanks!

[dgk]

As you wish

https://github.com/quasarframework/quasar/issues/808

[dgk]

[SOLVED]

For time being @rstoenescu is not adding this enhancement but here is the solution. This solution is for a list (v-for) of fab actions rather than hard coded. For hard coded fab actions just use make up your own ref= for each action and hard code a corresponding this.$refs.<myrefname>.open() in the two functions. see this github issue https://github.com/quasarframework/quasar/issues/808

<q-fixed-position corner="bottom-right" :offset="[18, 18]" >
<q-fab
  @open="openFab()"
  @close="closeFab()"
  color="primary"
  icon="fa-list"
  active-icon="fa-list-alt"
  direction="up"
>
  <q-fab-action v-for="view in views" :key="view._id" color="secondary" @click="filter(view)" icon="fa-list">
    <q-tooltip ref="fabviewtp" anchor="center left" self="center right" :offset="[0, 0]">{{ view.name }}</q-tooltip>
  </q-fab-action>
</q-fab>
</q-fixed-position>

    openFab () {
      if (this.$q.platform.has.touch) {
        setTimeout(() => {
          for (let index in this.$refs.fabviewtp) {
            this.$refs.fabviewtp[index].open()
          }
        }, 300)
      }
    },
    closeFab () {
      if (this.$q.platform.has.touch) {
        for (let index in this.$refs.fabviewtp) {
          this.$refs.fabviewtp[index].close()
        }
      }
    }
  },

[rstoenescu]

It will get added, but for the time being unfortunately there are other more important work items to be done before this. Thank you for your patience.

[hamdan85]

@dgk is this still working?
I tried to execute exacly what you sair (updating the methods of course) but it doesnt work at all…

[miketrebilcock]

The events on q-fab have changed to show and hide and so have the methods on q-tooltip

so change the

@open=“openFab()” to @show=“openFab()”

@close=“closeFab()” to @hide=“closeFab()”

and

this.$refs.fabviewtp[index].show()

and

this.$refs.fabviewtp[index].close() to this.$refs.fabviewtp[index].hide()