Jump to content

Need help with w3.css tooltip


vitalnet

Recommended Posts

I have been going through the w3.css documentation and see many things I like. However, the tooltip  https://www.w3schools.com/w3css/w3css_tooltips.asp page is different from what I expected. To me, a tooltip is as described on https://en.wikipedia.org/wiki/Tooltip - when you hover over (mouse over) an item a bubble appears with some text in it. Even when writing this post, there is a tooltip saying "Enter your text". But when I hover over "is the capital" in the w3.css tooltip "London is the capital" example, the text "(9 million inhabitants)" instead pushes the following text to the right to occupy some space. It is that "push to the right" part that I do not understand. I am using google chrome 74 and IE 11, both do the same thing. Is there another w3.css class that makes the tooltip with the bubble where the text is not shifted? Any help appreciated.

Link to comment
Share on other sites

I'm disappointed not to hear anything back. If I need to clarify my question, please let me know. I thought it was a clearly expressed and helpful post. But beggars cannot be choosers. 😊 In any case, thanks for the incredibly great w3schools website. I have learned a lot through the excellent tutorials and references. And maybe I will eventually hear back.

Link to comment
Share on other sites

2 hours ago, vitalnet said:

I'm disappointed not to hear anything back. If I need to clarify my question, please let me know. I thought it was a clearly expressed and helpful post. But beggars cannot be choosers. 😊 In any case, thanks for the incredibly great w3schools website. I have learned a lot through the excellent tutorials and references. And maybe I will eventually hear back.

Apologies, I must've seen this on my phone and so it dismisses it from my unreads so I didn't see it when I got to my PC.

 

A tooltip to me is a hint given when hovered or otherwise interacted with. Be it via the subject itself or an info icon. The method in which the information is delivered should be somewhat unobtrusive, but past that anything goes for a tooltip. The built in tooltip features for browsers may not be consistent enough for some.

Link to comment
Share on other sites

The tooltip wiki is describing  is the title attribute which can set directly to any html element example title="Whatever". Its design and positioning is determined by the browser.

The tooltip you are  seeing from w3schools is the tooltip created through html, CSS and or javascript as mentioned under wiki 'Examples' heading

"CSS, HTML, and JavaScript allow web designers to create customized tooltips"

Link to comment
Share on other sites

Thanks for the replies. Again, I find shifting all the following text jarring. To me, that is "somewhat obtrusive". It breaks up the main text. And everything shifts. I would not call it a "bug", because it seems to work exactly as designed. But I would suggest it might be the wrong design. Again, to me (and in common usage) a tooltip is a bubble or callout. Again, when entering text into the editor for the w3schools forum, you can hover over the text entry area and see "Enter your text..." as a little box that unobtrusively appears. That is a tooltip. Nothing is shifted. Maybe my comment might help improve w3.css some. Maybe not. At least you have answered my question and I am satisfied.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...