How to make popover on Quasar?

  • Hi, everyone! Please take my sentences quite funny.
    I have problem. I don’t know how to make the hoverable button menu (popover menu) component.
    Does anyone have any ideas!

  • You mean like the top right button menus in the Quasar docs? If yes, there you have code examples.

    Dig in and take a look.


  • Yes, I mean that one you said but there is one problem here.
    It should appear when I hover onto it and when I left it it should appear.
    I used @mouseover, @mouseenter, @mouseleave and @mouseout in order to make it.
    And I placed Q-List in Q-Menu and Q-Menu in Q-btn to make their size the same. It workd! But there is a problem.
    When I left the button with left or right side there is no any changes. How I can make it the same with I wanted.

    You can see what I’ve tried here on codepen:

  • You’ll need a bit more logic/ state between the hover of the button and the menu and the mouse leaving either of them. I did an example, but can’t find it, You should use methods for the switching logic.


  • Thank you for trying.
    I have a question now. Which Vue JS library is more suitable to use with Quasar for web and mobile too?
    Thanks in advance. After the response please don’t close the topic. If others know something about the question they may write some answers.

  • For new questions, you should start a new topic/ thread.

    But, to answer your question, I have to ask a question. What do you mean by Vue JS library? What problem is it you want to solve with the library?


  • Just I want to make a button which I said above.
    If there is any additional VueJS library or something
    one another to make this component easily please share it with me, please.
    I tried but can’t make that hover dropdown button component.
    I hope it will be added in the future releases of Quasar and will be added into the docs.

    This is what I want to tell you. Have a nice day, @S-Molinari.

  • It’s really not that hard to create the logic for the hover. No library will help you with it directly.


Log in to reply