ghosh / microtip Goto Github PK

View Code? Open in Web Editor NEW

1.4K 20.0 74.0 376 KB

💬 Minimal, accessible, ultra lightweight css tooltip library. Just 1kb.

Home Page: https://microtip.vercel.app/

License: MIT License

CSS 100.00%

css tooltip 1kb accessibility simple-api

microtip's Introduction

Modern, minimal css tooptip library with accessibility baked in. Just `1kb` minified and gzipped.

Installation
Setup
Usage
Customization
Related

Installation

via npm

npm install microtip

via yarn

yarn add microtip

via CDN

https://unpkg.com/microtip/microtip.css

direct download

curl -o microtip https://github.com/ghosh/microtip/blob/master/microtip.css

Setup

in PostCSS

@import 'microtip';

in Webpack

import microtip from 'microtip/microtip.css'

in SCSS

@import 'microtip/microtip';

Make sure, node_modules is included in the includePaths setting. You can then directly import the library into your file.

Usage

Using the tooltip is incredibly simple. Simply add a aria-label and role="tooltip" attribute to the element on which you want the tooltip to appear. The tooltip message is the attribute value aria-label="your message". This along with a position modifier is all you need to get going. Example:-

<button aria-label="Hey tooltip!" data-microtip-position="top" role="tooltip">

Position Modifiers

You can change the direction of the tooltip by adding a data-microtip-position attribute. The accepted values of this attribute are:- top, top-left, top-right, bottom, bottom-left, bottom-right, left and right. Example:-

<button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">

Size Modifiers

By default, the tooltip will takeup only the size it requires to show the text. You can specify sizes by adding a data-microtip-size attribute. The accepted values include small, medium, large and fit. Example:-

<button aria-label="This is a decently long text!" data-microtip-position="top-left" data-microtip-size="medium" role="tooltip">

Note - fit sets the width of the tooltip to be the same as the width on the element. It only works along with the top and bottom position modifiers.

Customization

Microtip uses css variables, which allows you to customize the behavior of the tooltip as per your needs.

Variable	Description	Default Value
`--microtip-transition-duration`	Specifies the duration of the tootltip transition	`.18s`
`--microtip-transition-delay`	The delay on hover before showing the tooltip	`0s`
`--microtip-transition-easing`	The easing applied while transitioning the tooltip	`ease-in-out`
`--microtip-font-size`	Sets the font size of the text in tooltip	`13px`
`--microtip-font-weight`	The font weight of the text in tooltip	`normal`
`--microtip-text-transform`	Controls the casing of the text	`none`

Example:-

:root {
 --microtip-transition-duration: 0.5s;
 --microtip-transition-delay: 1s;
 --microtip-transition-easing: ease-out;
 --microtip-font-size: 13px;
 --microtip-font-weight: bold;
 --microtip-text-transform: uppercase;
}

The above code will cause all the tooltips to transition over 0.5s while applying an easing of type ease-out after a delay of 1s. The text will be bold and uppercase and have a font size of 13px.

You could also customize the tooltip for individual instances by using a selector more specific than :root. Example:-

.tooltip {
 --microtip-transition-duration: 0.2s;
 --microtip-transition-delay: 0s;
 --microtip-transition-easing: ease-in-out;
}

The above code would only affect the tooltips shown on any element with the tooltip class.

For more on css variables see here

Micromodal - Tiny javascript library for creating accessible modal dialogs

Credits

Claudio Holanda - Whose work inspired this project

✌️

_{^{A little project by @i_ghosh}}

microtip's People

Contributors

Stargazers

Watchers

microtip's Issues

role="tooltip" causes invalid HTML for anchor tags with href

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 element a at this point.

Removing role="tooltip" clears the error, but the tooltip obviously won't work.

Tooltip background-color

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.

Tooltip on focus

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.

add scss style

little gap between arrow and body on mouseleave

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

Doesn't support box-shadow'ed tooltips

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):

create two triangle nubbins: (1) is used as the shadow (2) second is is overlayed on top. Example

Newer browsers:

you can use CSS filters.

Text is blurry

Come to think of it, the edges of the tooltip are blurry too.

feature: support edge alignment

Remove role="tooltip"

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.

feature: Tooltip Size (Height)

You can specify the size of the tooltip with data-microtip-size. However, this only accounts for the width of the tooltip.

If my text size is large, the tooltip height will match the size of the font.

There is no way to adjust the height size (see example image).

tooltip scrolling problem

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

Current project status

Hi, what is the current status of this project? Is it still maintained?

does not support ie 11

Microtip data-microtip-position="top" data-microtip-size="large" is working in chrome but not in ie11

Tooltip content is visibly hidden but still in accessibility tree so it is read by VoiceOver

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:

Implement the tooltip in the DOM
Open OSX VoiceOver
Use VO-right to traverse the page
Notice that VO will read out the tooltip node and will also stop on the ::after element, reading out the content again

In my own work, I got around this by setting display: none on the ::after element, then unsetting it on focus or hover. This breaks the animations in the tooltip, but provides, in my estimation, a better experience on a screen reader.

tooltip is not working for img tag

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

Not show when element disabled

Is possible to show only when element is disabled?

How to hide tooltip after a button is pressed?

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/

The prompt text cannot be placed at the top

I am in? There is a text prompt on the icon, but the prompt is not on the top. I want to know if there is any way

Multi line tool tip

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.

position "up" in documentation

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.

IE11 Support

To support our good ol' grand pa' IE11 I just added

_:-ms-fullscreen,
:root [role~="tooltip"]::after {
  white-space: pre-line;
}

question/feature_request(enhancement): tooltip on click

1. Summary

I couldn’t find how I can do tooltip on the click event to an element without jQuery if I use Microtip.

2. Argumentation

2.1. Common cause

Accessibility.

2.2. Details

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.

3. Desired behavior

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?

4. Not helped

I couldn’t find how I can get the desired behavior in:

Microtip documentation and examples
Google
Issues/pull requests of this repository

Thanks.