Jump to content
vitalnet

Need help with w3.css tooltip

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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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"

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...