ghosh / microtip Goto Github PK
View Code? Open in Web Editor NEW💬 Minimal, accessible, ultra lightweight css tooltip library. Just 1kb.
Home Page: https://microtip.vercel.app/
License: MIT License
💬 Minimal, accessible, ultra lightweight css tooltip library. Just 1kb.
Home Page: https://microtip.vercel.app/
License: MIT License
Doing like that you will not see tooltip on mouse hover.
<img src="/storage/img/arigato.png" alt="hey tooltip" data-microtip-position="bottom" aria-label="hey tooltip" role="tooltip">
It works only for link tags like that
<a href="" data-microtip-position="bottom" aria-label="hey tooltip" role="tooltip">
<img src="/storage/img/arigato.png" alt="hey tooltip" ></a>
But documentation says you can use it on any tag
Microtip data-microtip-position="top" data-microtip-size="large" is working in chrome but not in ie11
Just found this nice little gem. Nice work. Seems like an easy way to add nice tooltips.
But I think the use of the role="tooltip"
attribute is wrong. For example:
<button aria-label="Hey tooltip!" data-microtip-position="up" role="tooltip">
This implies that the role of the button is not a button anymore, but a tooltip. And that feels wrong, don't you think? The role of the button should still be a button.
To support our good ol' grand pa' IE11 I just added
_:-ms-fullscreen,
:root [role~="tooltip"]::after {
white-space: pre-line;
}
Not sure if this is a bug or expected behaviour. When we only hover the button, the tooltip disappears after the mouse is moved away. But when the button is clicked and then moved away, the tooltip stays, how can we remove the tooltip after the click?
Reproduced no https://microtip.now.sh/
Hello, I have a problem that I cannot solve, I cannot run the tooltip in scroll.for example, I have a scrolling navbar menu.when I hover over a menu name, the tooltip works fine on the right side. However, if I add scroll to the navbar, the tooltip is not displayed.it stays under the top div.I thought it was a Z-index problem but it didn't fix it.I would be very happy if you could help me.in short, the tooltip scroll does not work in a div or is there a problem with me?
thank you
here the tooltip works very well
But if I add scrolling here it doesn't work
because it stays under div
this is html space
This is an add-on to #5.
When using the library to an <a>
tag with an href
, the HTML becomes invalid according to the W3C validator.
For instance:
<a href="https://github.com/" aria-label="GitHub" data-microtip-position="bottom" role="tooltip">GitHub</a>
will produce the following error:
Attribute
href
not allowed on elementa
at this point.
Removing role="tooltip"
clears the error, but the tooltip obviously won't work.
Hey! Thanks for wonderful and tiny clean script, it's very handy and easy to use.
But is there a way to change background color of both tooltip background AND tooltip arrow? In my case arrow always stays black.
I couldn’t find how I can do tooltip on the click event to an element without jQuery if I use Microtip.
Accessibility.
If the end-user of my site click to some button, it would be nice to tell him that the action has been taken. It’s not good if the end-user doubts whether he did everything right. Also, it’s desirable that the dialog isn’t obtrusive and distracting.
Currently, I use Tooltipster jQuery tooltips library on my site for these purposes. Example, how it works:
One tooltip by hover, another tooltip by left mouse button click.
Unfortunately, Tooltipster have a big jQuery dependency and doesn’t work with Zepto and cash — lightweight jQuery alternatives.
Can we get the similar behavior for Microtip?
I couldn’t find how I can get the desired behavior in:
Thanks.
Microtip is MARVELOUS, easy to use and beautiful.
but I have been trying to use Multi line texts in the aria-label, seems like not possible.
Do you know a trick to make it happen?
Thanks.
Hi, what is the current status of this project? Is it still maintained?
much appreciate about this work, really usefull and clean,
when I hover out from an element there is a little gap between arrow and body. I think it's because of transition timing or something
The tooltip is shown on hover, but remains active on focus too. So when clicking a button with tooltip, the tooltip will remain active until i click somewhere else. I think the default behaviour should be to remove the tooltip after hovering out, and leave the current behaviour as optional, to be activated via a custom attribute.
Mostly created this issue for historical purposes of if people were looking for info
adding box shadows to this tooltip.
One thing to note:
This implementation of the tooltip with CSS only doesn't support box-shadows for older browsers that don't support css-filters unfortunately.
Older browsers (no css filter
property support):
Newer browsers:
Is possible to show only when element is disabled?
In the readme, the first example has data-microtip-position="up"
. Took me some minutes to figure out that this is not a valid option. Please change it.
Currently, this library only uses opacity
to visibly hide the tooltip. It then makes its content available to screen readers by overriding the accessible name of the associated node. This leads to a situation where the content is visibly hidden but still present in the accessibility tree.
Various screen readers disagree about what to do with content that has opacity set to 0. Some screen readers will ignore this content, but VoiceOver reads it out. This means that VoiceOver effectively reads out the content of aria-label
twice, once when the cursor is on the tooltip node itself, and again when the cursor is set to the ::after
pseudo-element.
To replicate:
::after
element, reading out the content againIn my own work, I got around this by setting display: none
on the ::after
element, then unset
ting it on focus or hover. This breaks the animations in the tooltip, but provides, in my estimation, a better experience on a screen reader.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.