Sets or gets the tooltip's horizontal position if the position property is set to 'absolute'.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'absolute'" :absolutePositionX="20">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the tooltip's vertical position if the position property is set to 'absolute'.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'absolute'" :absolutePositionY="20">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets whether the tooltip will automatically hide after duration equal to the autoHideDelay property.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'bottom'" :autoHide="false">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the duration after which the tooltip automatically hides (works only if the autoHide property is set to true). If autoHideDelay is set to 0, the tooltip hides only after the mouse has left the parent element.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :autoHideDelay="100">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the duration of the tooltip animation at show.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :animationShowDelay="2000">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the duration of the tooltip animation at hide.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :animationHideDelay="2000">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the content of jqxTooltip. It can be either plain text or HTML code.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets whether the tooltip will close if it is clicked.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :closeOnClick="false">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets whether the tooltip is disabled.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :disabled="true">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets whether jqxTooltip will be hidden if it leaves the browser bounds or will be offset so that it is always within the browser's bounds and visible.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :enableBrowserBoundsDetection="false">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the height of jqxTooltip.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :height="30">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the horizontal offset of jqxTooltip based on the position property.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'bottom'" :left="100">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the name of the tooltip's group. Only one tooltip from a group can be shown at a time. By default, all tooltips are in a single group.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :name="'tooltipGroup1'">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the tooltip's opacity.The value must be between 0 and 1.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :opacity="0.5">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the position of jqxTooltip.

Possible Values:

'top' - the tooltip shows above the host element

'bottom' - the tooltip shows below the host element

'left' - the tooltip shows at the left of the host element

'right' - the tooltip shows at the right of the host element

'top-left' - the tooltip shows at the top-left side of the host element

'bottom-left' - the tooltip shows at the bottom-left side of the host element

'top-right' - the tooltip shows at the top-right side of the host element

'bottom-right' - the tooltip shows at the bottom-right side of the host element

'absolute' - the tooltip shows at an absolute position on screen, defined by the coordinate properties absolutePositionX and absolutePositionY

'mouse' - the tooltip shows after a short period of time at the position of the mouse cursor

'mouseenter' - the tooltip shows where the mouse cursor has entered the host element

'default' - the tooltip shows at the bottom-right side of the host element but does not make use of the left and top properties

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets whether the jqxTooltip's right-to-left support is enabled.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :rtl="true">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the duration after which the tooltip will be shown.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :showDelay="200">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets whether the tooltip's arrow will be shown.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :showArrow="false">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the vertical offset of jqxTooltip based on the position property.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :top="100">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the way of triggering the tooltip.

Possible Values:

'hover' - the tooltip shows immeadiately after hovering over the host element.

'click' - the tooltip shows when the host element is clicked

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :trigger="'click'">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"type="text/css"/>
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :theme="'material'">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

Sets or gets the width of jqxTooltip.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'" :width="200">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    }
  }
</script>

This event is triggered when the tooltip is closed (hidden).

Code examples

Bind to the close event of jqxTooltip.

<template>
  <JqxTooltip ref="myTooltip" @close="onClose($event)"
    :content="'This is a jqxButton'" :position="'mouse'">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    },
    methods: {
      onClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the tooltip is closing.

Code examples

Bind to the closing event of jqxTooltip.

<template>
  <JqxTooltip ref="myTooltip" @closing="onClosing($event)"
    :content="'This is a jqxButton'" :position="'mouse'">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    },
    methods: {
      onClosing: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the tooltip is opened (shown).

Code examples

Bind to the open event of jqxTooltip.

<template>
  <JqxTooltip ref="myTooltip" @open="onOpen($event)"
    :content="'This is a jqxButton'" :position="'mouse'">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    },
    methods: {
      onOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the tooltip is opening.

Code examples

Bind to the opening event of jqxTooltip.

<template>
  <JqxTooltip ref="myTooltip" @opening="onOpening($event)"
    :content="'This is a jqxButton'" :position="'mouse'">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    },
    methods: {
      onOpening: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Specifies a time before the tooltip closes. If it is not set, the tooltip closes immediately.

<template>
  <div>
    <JqxTooltip ref="myTooltip"
          :content="'This is a jqxButton'" :position="'bottom'" :autoHide="false">
      <JqxButton :width="500">Hover to see the tooltip</JqxButton>
    </JqxTooltip>
    <JqxButton style="margin-top: 20px" :width="80" @click="close()">Close</JqxButton>
  </div>
</template>
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTooltip,
      JqxButton
    },
    methods: {
      close: function () {
        this.$refs.myTooltip.close();
      }    
    }
  }
</script>

Destroys the tooltip by removing it from the DOM.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    },
    mounted: function () {
      this.$refs.myTooltip.destroy();
    }
  }
</script>

Opens the tooltip.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    },
    mounted: function () {
      this.$refs.myTooltip.open();
    }
  }
</script>

Refreshes the tooltip.

<template>
  <JqxTooltip ref="myTooltip"
    :content="'This is a jqxButton'" :position="'mouse'">
    <JqxButton :width="500">Hover to see the tooltip</JqxButton>
  </JqxTooltip>
</template>
 
<script>
  import JqxTooltip from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxTooltip,
      JqxButton
    },
    mounted: function () {
      this.$refs.myTooltip.refresh();
    }
  }
</script>