Trying to build my own Tooltip component

AdrianG

Hi

I really want to use the already existing Tooltip component, but I haven’t been able to get it to work correctly. This is why I tried to build my own Tooltip, but so far without any luck

My main concerns with the current component is that it goes away when the user scrolls. I did manage to find a way to stop it from hiding, but then I just realized the tooltip was fixed to a certain position (I want it to stay relative to it’s parent inputfield component)

The page is set up with a lot of smaller components inside components. On the main page, there is a dialog, inside this there is a splitter, where there is a card with all my input fields and my tooltip
At first I just built up my component from scratch, but it seems like no matter what I did, the component stayed inside the card component where the input fields are located. I want the fields to stay on top of everything. In the screenshot below my “tooltip” is causing the card I’m in to have a scrollbar (parts of the information is outside view). But I want the information to flow from the left card over to the right card (the right card is the other side of the before mentioned splitter)

alt text

My CSS style for this is here:

.validationMessage
    {
        position: absolute;
        margin-left: 15px;
        margin-top: -27px;
        font-size: 0.55rem;
        background-image: linear-gradient(to top, #cfd9df 80%, #e2ebf0 100%);
        border-style: solid;
        border-radius: 10px;
        border-width: thin;
        padding-left: 7px;
        padding-right: 7px;
        padding-top: 1px;
        z-index: 16000;
        white-space: nowrap;
    }

I then tried something else. Using the Chrome dev tools I decided to copy the style from the Quasar tooltip (Just copied the full Div) and insert it in my component (replacing my own code). I wanted to work from this working component and see if I could change it to my needs. The Tooltip component is already on top of everything, which is my main problem in my code
Unfortunately this does not work. In the screenshot below I have two tooltips. Top one is copied code in the base html file outside any other components, the below one that is hiding is copied inside my component

alt text

Using the Chrome dev tools I only found this small difference in those two copied tooltip. Nothing here that hints at why one is on top, the other one is not

alt text

<div role="complementary" class="q-tooltip q-tooltip--style q-position-engine no-pointer-events" style="visibility: visible;top: 483px;left: 363px;">

                Angiv en værdi der mindst er 0
</div>

Any idea on why on of them is on top and the other one is not? Or how I could get the tooltip component to do as I like?

s.molinari

What is wrong with the current tooltip solution? What is it not doing right for you?

Scott

AdrianG

My main concerns with the current tooltip is that in all examples it hides when the user scrolls. I did manage to find a way to stop it from hiding, but then I just realized the tooltip was fixed to a certain position (I want it to stay relative to it’s parent inputfield component), so when I’m scrolling the tooltip stays in place instead of following the component
I’m planning on using it as a errormessage when the user has written data that is not allowed (I wasn’t fond of the built in error for input)

qyloxe

@AdrianG said in Trying to build my own Tooltip component:

My main concerns with the current tooltip is that in all examples it hides when the user scrolls.

that is possibly a good feature ex. persistent-view ???

I did manage to find a way to stop it from hiding, but then I just realized the tooltip was fixed to a certain position (I want it to stay relative to it’s parent inputfield component), so when I’m scrolling the tooltip stays in place instead of following the component

that should be reported as bug/inconsistency

I’m planning on using it as a errormessage when the user has written data that is not allowed (I wasn’t fond of the built in error for input)

that’s essentially not tooltip but rather a hint component (hints could be activated by keyboard, they could be activated programmatically in sequence - it allows to present a learning/teaching opportunity for user, you can have simultanously open more then one hint, you can have custom components on hint ie “next step”, “why”, “more”).
hints !== tooltips

AdrianG

@qyloxe said in Trying to build my own Tooltip component:

that should be reported as bug/inconsistency

Will do

@qyloxe said in Trying to build my own Tooltip component:

that’s essentially not tooltip but rather a hint component

Yeah, in my app I’m not calling my component tooltip as it’s not a tooltip IMHO, but from a code perspective it does have some of the same elements (e.g. staying on top of other elements), which is why I’m looking at the code for the Tooltip component

s.molinari

Sounds like you might want a custom component with QPopupProxy?

Scott

AdrianG

Thanks, I’m looking in to that one. The problems I’m facing with this one so far is that when I click on the fields it’s attached to it will toggle the visibility (I’m trying to be the one deciding if it should be visible or not) and remove focus from the field I just put focus in (so I need to click twice for the cursor to stay in the field). Tabbing seems fine, but knowing the users, they will use mouse click

In the below example I’m trying to force the popup on the right to stay open for one of the input fields, while the popup on the left side should stay closed. Unfortunately as soon as I click in any of the input fields, the popup closes (if I click in the input where the popup is closed, the popup becomes visible and focus on input goes away)
https://codepen.io/Adagio_B/pen/pojENMo

AdrianG

It seems like I managed to get it working (at least in my codepen), where I simply told it to show every time it tried to hide
My project is a bit more advanced, but hopefully I can use the same idea

But why does it work? In the method called I’m using this.show(), but doesn’t “this” refer to the vue js object, not the specific popup proxy?

Ahhh, seems like just using @input fixes the problems. The methods just needs to be empty

No More Posting New Topics!

Trying to build my own Tooltip component