Display Fab action tooltips on open



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

  • Admin

    Hi,

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

    Thanks!





  • [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()
            }
          }
        }
      },
    

    0_1507074305718_upload-6121507b-c5dd-419b-932f-a48f9fd4d8fb


  • Admin

    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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.