microtip - GitLite

KO | EN

gitlite — search

#hacktoberfest #typescript #llm #android #machine-learning #linux #nodejs #windows #awesome #kubernetes #pytorch #openai #mcp #open-source

microtip

(★ 1,400)

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

파일 탐색기

최종 버전 다운로드 (.zip)

.gitignore
.stylelintrc
.travis.yml
license.md
microtip.css
microtip.min.css
package.json
README.md
yarn.lock

🚀 설치 가이드

1. 코드 내려받기

git clone https://github.com/ghosh/microtip

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd microtip

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install microtip

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn add microtip

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  <img src="https://www.dropbox.com/s/lux7521vqphtrsz/microtip.png?raw=1" width="200px"/>
</p>

<p align="center">
  <a href="#">
    <img src="https://img.shields.io/badge/made%20with-love-E760A4.svg" alt="Made with love">
  </a>
  <a href="https://opensource.org/licenses/MIT" target="_blank">
    <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License">
  </a>
  <a href="https://travis-ci.org/ghosh/microtip" target="_blank">
    <img src="https://api.travis-ci.org/ghosh/microtip.svg" alt="Build Status">
  </a>
</p>

<p align="center">
Modern, minimal css tooptip library with accessibility baked in. Just `1kb` minified and gzipped.
</p>

---

![Microtip](https://www.dropbox.com/s/gracjkb2rca2zj6/microtip.gif?raw=1)

&nbsp;

## Table of Contents
- [Installation](#installation)
- [Setup](#setup)
- [Usage](#usage)
- [Customization](#customization)
- [Related](#related)

&nbsp;
## Installation

**via npm**
```shell
npm install microtip
```

**via yarn**
```shell
yarn add microtip
```

**via CDN**
```
https://unpkg.com/microtip/microtip.css
```

**direct download**
```shell
curl -o microtip https://github.com/ghosh/microtip/blob/master/microtip.css
```

&nbsp;
## Setup

**in PostCSS**
```scss
@import 'microtip';
```

**in Webpack**
```javascript
import microtip from 'microtip/microtip.css'
```

**in SCSS**
```scss
@import 'microtip/microtip';
```
Make sure, `node_modules` is included in the `includePaths` setting. You can then directly import the library into your file.

&nbsp;
## 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:-
```html
<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:-
```html
<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:-
```html
<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.

&nbsp;
## 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`        |

&nbsp;

Example:-
```css
: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:-

```css
.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](https://css-tricks.com/now-css-custom-properties-thing-value-parts-can-changed-individually/)

&nbsp;
## Related
- [Micromodal](https://github.com/Ghosh/micromodal) - Tiny javascript library for creating accessible modal dialogs

&nbsp;
## Credits
- [Claudio Holanda](https://twitter.com/kazzkiq) - Whose work inspired this project

&nbsp;

<p align="center">✌️</p>
<p align="center">
<sub><sup>A little project by <a href="https://twitter.com/_ighosh">@i_ghosh</a></sup></sub>
</p>