v-component-tooltips

A vue tooltips component

Getting Started

1.Install with NPM

npm i v-component-tooltips

2.Import into your vue component

import Tooltips from 'v-component-tooltips'

3.Wrap any element with the Tooltips component

Example: Different usage of content

<Tooltips content="Inline Content" >
    <div class="wrap-any-element-you-want">
        Main Area
    </div>
</Tooltips>

<Tooltips>
    <div slot="content">Slot Content</div>
        Main Area With No Wrapper
</Tooltips>

Properties

Name	Type	Description	Default	Value
placement	String	The position of the Tooltips tag show, it could be 12 different directions	bottom	'bottom', 'top', 'right', 'left', 'top-right', 'top-left', 'right-top', 'right-bottom', 'bottom-left', 'bottom-right', 'left-top', 'left-bottom'
no-arrow	Boolean	Control the triangle of the tooltips tag show or not	true	true, false
content	slot/string	You can transfer the content like an property "content", or you can use the slot with name="content" to adding things to the tag	-	-
offset	Array	It only accept an array with 2 elements, offset[1] control the offset to origin top of tag box, offset[2] control the offset to origin left of tag box	[0, 0]	-
show-delay	Number	The seconds before showing the tag	0	-
hide-delay	Number	The seconds before hiding the tag	0	-
disabled	Boolean	For controlling the tag show or not	false	true, false
text-color	String	The color of main text after hovering	#66009D	rgba, rgb, binary color
box-color	String	The color of main box border after hovering	#7700BB	rgba, rgb, binary color
duration	Number	The duration of completing the transition function	0.2	-
transition-function	String	The time function of transition	ease-in	-

Events

Name	Type	Description	Default	Value
onPopperOpen	Function	Triggered when the mouse is hover into the main area	-	-
onPopperClose	Function	Triggered when the mouse leave the main area	-	-

How to use(simple-examples)

offset

<Tooltips placement="left" content="Left Offset Content" :offset="[-122,-111]">
      <div class="tooltips-content">
        offset in left tag
      </div>
</Tooltips>

disabled

<Tooltips placement="top" content="有Disabled的content" disabled>
    <div class="tooltips-content">
        content with disabled
    </div>
</Tooltips>

duration && transition-function

<Tooltips placement="left" content="abc" :duration="0.2" transition-function="ease-in">
    <div class="tooltips-content">
          transition function
      </div>
</Tooltips>

show-delay && hide-delay

<Tooltips placement="top" content="abc" :show-delay="1" :hide-delay="2">
    <div class="tooltips-content">
        With both show delay and hide delay
    </div>
</Tooltips>

no-arrow

<Tooltips placement="top" content="abc" no-arrow>
    <div class="tooltips-content">
        没有箭头
    </div>
</Tooltips>