https://github.com/kanety/stimulus-tooltip

https://github.com/kanety/stimulus-tooltip

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/kanety/stimulus-tooltip
• Owner: kanety
• License: mit
• Created: 2022-06-22T11:06:15.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-09-21T20:26:16.000Z (over 2 years ago)
• Last Synced: 2024-11-04T02:03:05.801Z (2 months ago)
• Language: JavaScript
• Size: 11.7 KB
• Stars: 3
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# stimulus-tooltip

A stimulus controller for simple tooltip.

## Dependencies

* @hotwired/stimulus 3.0

## Installation

Install from npm:

    $ npm install @kanety/stimulus-tooltip --save

## Usage

Register controller:

```javascript

import { Application } from '@hotwired/stimulus';

import TooltipController from '@kanety/stimulus-tooltip';

const application = Application.start();

application.register('tooltip', TooltipController);

```

Import css:

```css

@import '@kanety/stimulus-tooltip';

```

Build html as follows:

```html



  

    Content

  

  

    Tooltip

  



```

### Options

#### position

Show tooltip at specified position of the content:

```html



  ...



```

Default is `top-start`.

Available positions are:

* `top-start`

* `top-end`

* `bottom-start`

* `bottom-end`

* `left-start`

* `left-end`

* `right-start`

* `right-end`

Following shorthands are also available:

* `top`: shorthand of `top-start`

* `bottom`: shorthand of `bottom-start`

* `left`: shorthand of `left-start`

* `right`: shorthand of `right-start`

Note that the position is changed automatically if the tooltip is not visible in the window.

### Callbacks

Run callbacks when a tooltip is shown or hidden:

```javascript

let element = document.querySelector('[data-controller="tooltip"]');

element.addEventListener('tooltip:shown', (e) => {

  console.log('shown: ' + e.detail.tip);

});

element.addEventListener('tooltip:hidden', (e) => {

  console.log('hidden: ' + e.detail.tip);

});

```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).