Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gvital3230/tailwindcss-tooltip-arrow-after

tailwindcss tailwindcss-plugin

Last synced: 13 days ago
JSON representation

Host: GitHub
URL: https://github.com/gvital3230/tailwindcss-tooltip-arrow-after
Owner: gvital3230
License: mit
Created: 2020-04-05T14:38:02.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2021-05-11T07:12:06.000Z (over 3 years ago)
Last Synced: 2024-05-14T12:20:27.876Z (6 months ago)
Topics: tailwindcss, tailwindcss-plugin
Language: JavaScript
Size: 21.5 KB
Stars: 48
Watchers: 3
Forks: 3
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Tailwind Plugin generating triangle arrows for tooltip-ish divs

## Description

This plugin generates styles for CSS based triangle arrows with configurable border and background via `::after` pseudo-elements.

![example](./img/arrows-example.png)

## Installation

Add this plugin to your project:

```bash
# Install via npm
npm install --save-dev tailwindcss-tooltip-arrow-after
```

## Usage

The plugin configuration accepts multiple objects where each key defines a class suffix for a arrow name. This options
should be defined in 'theme.tooltipArrows' key in tailwind.config.js

```js
module.exports = {
//...
theme: {
tooltipArrows: theme => ({
'danger-arrow': {
borderColor: theme('colors.red.400'),
borderWidth: 1,
backgroundColor: theme('colors.red.200'),
size: 10,
offset: 10
},
}),
}
//...
}
```

- `borderColor`: border color
- `borderWidth`: border width (in pixels) e.g. `1`
- `backgroundColor`: background color
- `size`: size (in pixels)
- `offset`: offset (from left to right for top and bottom arrows and from top to bottom for left and right ones)

Here is the example for adding it to your project plugins

```js
module.exports = {
// ...
plugins: [
// ...
require('tailwindcss-tooltip-arrow-after')()
],
}
```

This configuration would generate classes for all four direction variants of arrows:
- `danger-arrow-top`
- `danger-arrow-right`
- `danger-arrow-bottom`
- `danger-arrow-left`

Example for `danger-error-top` styles:

```css
.danger-arrow-top {
position: relative;
}

.danger-arrow-top:before, .danger-arrow-top:after {
content: "";
position: absolute;
left: 10px;
top: -20px;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fc8181;
border-left: 10px solid transparent;
}

.danger-arrow-top:after {
border-bottom: 10px solid #fed7d7;
top: -19px;
}
```

You can use it in your html

```html

TOP ARROW

RIGHT ARROW

BOTTOM ARROW

LEFT ARROW

```