# rusion-markdown

**Repository Path**: plain-backup/rusion-markdown

## Basic Information

- **Project Name**: rusion-markdown
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-01-03
- **Last Updated**: 2024-01-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# yirous-popper

A popper manager library 

[Online Demo](http://yirous.gitee.io/yirous-popper/)

## Install

```
npm i yirous-popper -S
```

## Get start

prepare a target element

```html
<button id="target"> I am target</button>
```

prepare a popper element 

```html
<div id="popper">
    <div class="yirous-popper-content">
        popper content
    </div>
</div>
```

create popper instance

```js
new YirousPopper({
    popperEl: document.querySelector('#popper'),
    targetEl: document.querySelector('#target')
})
```

## Parameters

The constructor options of YirousPopper

|name|type|desc|
| --- | --- | --- |
| popperEl | HTMLElement | popper element(not selector string) |
| targetEl | HTMLElement | target element(not selector string) |
| offset | number | duration between target and popper(not include arrow size) |
| boundary | HTMLElement,selector string,window | the boundary element to contain the popper element |
| placement | string | default:`bottom`, can be: `top`,`left`,`bottom`,`right`, `top-start`,`top-center`,`top-end`, `bottom-start`,`bottom-center`,`bottom-end`, `left-start`,`left-center`,`left-end`, `right-start`,`right-center`,`right-end`, |
| backgroundColor | string | the backgroundColor of the popper content and popper arrow |
| boxShadow | string | the boxShadow of the popper content and popper arrow |
| arrow | boolean | default is false, if true, you need to provide `div.yirous-popper-arrow` under popper element. |
| arrowSize | number | default is 20, the size of the popper arrow |

## Methods

YirousPopper.prototype

|name|desc|
| --- | --- |
| refresh | refresh the position of the popper |
| destroy | release variable and unbind event |
| setPlacement(placement:string) |  change placement |

# YirousTooltip

prepare target element like this:

```html
<button id="target">target</button>
```

create tooltip instance

```js
new Yirouspopper.YirousTooltip({
    targetEl: document.querySelector('#target'),
    content: 'this is tooltip content, content parameter also can accept a HTMLElement to customize tooltip content'
})
```

## Parameters

The constructor options of YirousTooltip

|name|type|desc|
| --- | --- | --- |
| targetEl | HTMLElement | target element(not selector string) |
| offset | number | duration between target and popper(not include arrow size) |
| boundary | HTMLElement,selector string,window | the boundary element to contain the popper element |
| placement | string | default:`bottom`, can be: `top`,`left`,`bottom`,`right`, `top-start`,`top-center`,`top-end`, `bottom-start`,`bottom-center`,`bottom-end`, `left-start`,`left-center`,`left-end`, `right-start`,`right-center`,`right-end`, |
| backgroundColor | string | the backgroundColor of the popper content and popper arrow |
| boxShadow | string | the boxShadow of the popper content and popper arrow |
| arrow | boolean | default is false, if true, you need to provide `div.yirous-popper-arrow` under popper element. |
| arrowSize | number | default is 20, the size of the popper arrow |
| --- | --- | --- |
| theme | 'light','dark'(default) | the style of tooltip |
| animate | 'scale','drop','fade'(default) | the animation of tooltip when show and hide|
| content | string,HTMLElement | this content of tooltip |
| trigger | 'always'(default),'click','focus','hover','manual' | the way to show tooltip |
| removeOnHide | boolean(true) | when tooltip is hide, tooltip will automatically remove tooltip element from body |