Vue UI Components Documentation

Sets or gets the arrow's offset from its default position.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :arrowOffsetValue="50">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

The time for showing of the widget.

'fast'

'slow'

time in milliseconds e.g. 1000

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :animationOpenDelay="1000">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

The time for showing of the widget.

'fast'

'slow'

time in milliseconds e.g. 1000

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :animationCloseDelay="1000">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

Sets or gets the closing of the widget after click outside of the popover.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :autoClose="false">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

Sets the type of animation.

'none'

'fade'

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :animationType="'none'">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

Sets or gets the popover's height.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :height="60">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

Initializes the popover's content.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :initContent="initContent">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    },
    methods: {
      initContent: function () {
        alert('Init content is called!');
      }
    }
  }
</script>

Sets or gets whether the popover is displayed as a modal dialog. If the jqxPopover's mode is set to modal, the popover blocks user interaction with the underlying user interface.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :isModal="true">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

Sets or gets the Popover's offset from its position.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :offset='{left: 10, top: 10}'>
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

Sets or gets the position of the popover. The position presents the orientation of the popover compared to the selector element

'top'

'right'

'bottom'

'left'

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :position="'right'">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :rtl="true">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

Sets or gets the Popover's selector. The selector is the element where the Popover is displayed.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

Sets or gets the displaying of the popover's arrow.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :showArrow="false">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

Sets or gets whether the close button is displayed.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

Sets or gets the popover's width.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :width="200">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</script>

Sets or gets the popover's title.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    }
  }
</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>
    <div>
      <button style="margin-left: 50px" id="button">Click me</button>
      <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true" :theme="'material'">
        <div>Popover content</div>
      </JqxPopover>
    </div>
  </template>
   
  <script>
    import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
   
    export default {
      components: {
        JqxPopover
      }
    }
  </script>
  

This event is triggered when the popover is closed.

Code examples

Bind to the close event of jqxPopover.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" @close="onClose($event)" :title="'Title'" :selector="'#button'" :showCloseButton="true">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    },
    methods: {
      onClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the popover is opened.

Code examples

Bind to the open event of jqxPopover.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" @open="onOpen($event)" :title="'Title'" :selector="'#button'" :showCloseButton="true">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    },
    methods: {
      onOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Closes the popover.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true">
      <div>Popover content</div>
    </JqxPopover>
    <div>
      <JqxButton @click="open">Open</JqxButton>
      <JqxButton @click="close">Close</JqxButton>
    </div>
  </div>
</template>
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxPopover,
      JqxButton
    },
    methods: {
      open: function () {
        this.$refs.myPopover.open();
      },
      close: function () {
        this.$refs.myPopover.close();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 100px;
    margin-right: 20px;
  }
</style>

Destroy the widget.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true">
      <div>Popover content</div>
    </JqxPopover>
  </div>
</template>
 
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
 
  export default {
    components: {
      JqxPopover
    },
    mounted: function () {
      this.$refs.myPopover.destroy();
    }
  }
</script>

Open the popover.

<template>
  <div>
    <button style="margin-left: 50px" id="button">Click me</button>
    <JqxPopover ref="myPopover" :title="'Title'" :selector="'#button'" :showCloseButton="true">
      <div>Popover content</div>
    </JqxPopover>
    <div>
      <JqxButton @click="open">Open</JqxButton>
      <JqxButton @click="close">Close</JqxButton>
    </div>
  </div>
</template>
<script>
  import JqxPopover from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxPopover,
      JqxButton
    },
    methods: {
      open: function () {
        this.$refs.myPopover.open();
      },
      close: function () {
        this.$refs.myPopover.close();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 100px;
    margin-right: 20px;
  }
</style>