How to keep tooltips inside the page?
So, I understand the basic principle of tooltips - you basically create the tooltip element next to the trigger element, and then you make it visible when the cursor passes over the trigger element. But if the trigger element is on the edge of the page, then the tooltip will be "outside". How can I avoid that? I'm so sorry for not using the proper technical terms, I'm only an occasional enjoyer 😅
15 Replies
you can't
implement your own
that's the only way
Even with JavaScript?
tooltips don't exist
they aren't part of the document
it's an os/browser thing
you can use alternatives
im sure someone made proper tooltips that are accessible
Well I guess I haven't googled hard enough 😅
I will think about it more then
Thank you for your help!
you're welcome
cant wait for anchor
same
but he abandoned the post
popover api is what i plan to start using for tooltips now that mozilla has gotten on board and support is getting better
sadly, o.p. isn't among us in this post
Of course you can do this. It's obvious from your question that you intend to implement these yourself, so I'm not sure why after less than a minute someone told you "you can't."
All you need to get with javascript is three things: 1. The x,y position of the trigger element. 2. The width of the tooltip. 3. The width/height of the page.
Let's say the width of the page is 1200px, the trigger element is near the right edge at 1150px and the width of the tooltip is 100px. So... because triggerX > (pageWidth - tipWidth) then the tip will need to be placed at (triggerX - tipWidth) and I'd suggest adding whatever you consider to be a comfortable margin, like 15 or 20px to tipWidth.
You can use similar logic to determine the Y position to make sure tooltips will be visible for elements too close to the top or bottom of the page as well if that's an issue.
that's no longer a tooltip
not the os ones
but i like how your answer is "that dude is wrong, ofc you can: you just have to implement everything yourself"
which is exactly half of the answer
Thanks for the helpful explanation! I completely gave up on this thread until I got pinged, lol
Yeah, the basic structure was already set up (and perfectly working) at the moment of writing the original post but the tooltip was always above the trigger regardless of what happened nearby and it bothered me a lot.
Your answer is very helpful! You did not assume I knew stuff, and you gave me full explanation.
I'll try to do that when I can code again, and I will let you know how it went.
Yeah? You like that?
Listen, champ... I don't like how less than a minute after the OP asked their question you, without even reading it thoroughly, replied "you can't."
The OP clearly stated "you basically create the tooltip element next to the trigger element, and then you make it visible when the cursor passes over the trigger element" which is OF COURSE how you implement it yourself. So telling them that they need to implement it was about as helpful as telling them they can't.
If you don't fully understand the question or don't have adequate knowledge to answer it, why in the world are you posting?
this is a tooltip.
it shows wherever it wants.
the browser has control over it.
please, tell me how wrong i am
Believe it or not, there is more than one tooltip in the world and they even existed before browsers.
A tooltip is ANY onscreen information that helps explain another onscreen element.
(I can't believe I'm having to explain this. Don't you have access to the internet?)
Tooltips are often built in to applications, like a browser, but they can also be created within an application, like a browser, with the use of markup and code. These can be static or dynamic, they can be fixed or attached to a cursor, they could contain a couple of words or entire paragraphs, and while the browser might be enabling them, it wouldn't have control over them. That is how you're wrong.
What you've missed, of course, is that the real problem isn't your lack of understanding about tooltips, your real problem is taking the time to understand someone's question and then offering something helpful or nothing at all.