jQuery鼠标悬停文字提示插件

Directions

Directions tooltips

Top

data-mytooltip-direction="top" or direction:'top' - This default value

Right

data-mytooltip-direction="right" or direction:'right'

Left

data-mytooltip-direction="left" or direction:'left'

Bottom

data-mytooltip-direction="bottom" or direction:'bottom'

Offset

Оffset tooltips

Default

data-mytooltip-offset=10 or offset:10 - This default value

Offset custom

data-mytooltip-offset=20 or offset:20

Templates

Plain text or great HTML template

hover to me

data-mytooltip-template"<strong>plain text</strong>" or template:'plain text'
or add selector a string '.content-class'

Hover link: "Mars"

The chemicals allow the water to remain liquid at lower temperatures but also help keep it from boiling off in the thin atmosphere of Mars,
the researchers said.

dinamic template

data-mytooltip-dinamic-template=true or dinamicTemplate:true

Animation

Animation options

Animate duration default

data-mytooltip-animate-duration=200 or animateDuration:200 - This default value

Fast animate duration

data-mytooltip-animate-duration=100 or animateDuration:100

Slow animate duration

data-mytooltip-animate-duration=400 or animateDuration:400

Animate offset default

data-mytooltip-animate-offset-px=15 or animateOffsetPx:15 - This default value

Animate offset custom

data-mytooltip-animate-offset-px=40 or animateOffsetPx:40

Animate offset custom null

data-mytooltip-animate-offset-px=0 or animateOffsetPx:0

Actions

Support actions

Hover me

data-mytooltip-action="hover" or action:'hover' - This default value

Click me

data-mytooltip-action="click" or action:'click'

Focus:

data-mytooltip-action="focus" or action:'focus'

Events

Custom events

Open console and hover me

List of events:

show-before
show-complete
hide-before
hide-complete


      $(domElement).on(event, function() {

        // your code

      });

Methods

Public methods

Call:


      setTimeout(function() {

        $(domElement).myTooltip('call');

      }, 300);

Update:


        $(domElement).myTooltip('update');

Click to add new Elements and call public method update

Destroy:


        $(domElement).myTooltip('destroy');

Hover me

Destroy this hover element

updateTemplate:


        $(domElement).myTooltip('updateTemplate', 'template');

need to install:
data-mytooltip-dinamic-template=true or dinamicTemplate:true

Themes

Ready-to-use

Default

data-mytooltip-theme="default" or theme:'default' - This default value

Danger

data-mytooltip-theme="danger" or theme:'danger'

Warning

data-mytooltip-theme="warning" or theme:'warning'

Info

data-mytooltip-theme="info" or theme:'info'

Success

data-mytooltip-theme="success" or theme:'success'

Light

data-mytooltip-theme="light" or theme:'light'

Custom theme

Your custom style

My tooltip

data-mytooltip-custom-class="my-tooltip" or customClass:'my-tooltip'

Others

Other examples

?

data-mytooltip-cursor-help=true or cursorHelp:true

Hover me

data-mytooltip-hover-tooltip=false or hoverTooltip:false

Disposable

data-mytooltip-disposable=true or disposable:true

Show one second

data-mytooltip-hide-time=1000 or hideTime:1000

No show

Add class "js-mytooltip-ignore" to DOM element or set user class:

data-mytooltip-ignore-class='my-ignore-class' or ignoreClass:"my-ignore-class"

Dropdown menu »

Add a class DOM element:

data-mytooltip-template='.js-dropdown-menu'

Attribute title custom »
Banksia menziesii grows primarily in deep sandy soils of the Swan Coastal Plain and Geraldton Sandplains, extending from Waroona in the south to Kalbarri in the north.

data-mytooltip-form-title=true or fromTitle:true