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
ἔρως
ἔρως2mo ago
you can't implement your own that's the only way
Alistair
Alistair2mo ago
Even with JavaScript?
ἔρως
ἔρως2mo ago
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
Alistair
Alistair2mo ago
Well I guess I haven't googled hard enough 😅 I will think about it more then Thank you for your help!
ἔρως
ἔρως2mo ago
you're welcome
MarkBoots
MarkBoots2mo ago
cant wait for anchor
ἔρως
ἔρως2mo ago
same but he abandoned the post
clevermissfox
clevermissfox2mo ago
popover api is what i plan to start using for tooltips now that mozilla has gotten on board and support is getting better
ἔρως
ἔρως2mo ago
sadly, o.p. isn't among us in this post
Squeemeister
Squeemeister2mo ago
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.
ἔρως
ἔρως2mo ago
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
Alistair
Alistair2mo ago
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.
Squeemeister
Squeemeister2mo ago
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?
ἔρως
ἔρως2mo ago
this is a tooltip. it shows wherever it wants. the browser has control over it. please, tell me how wrong i am
No description
Squeemeister
Squeemeister2mo ago
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.