All Components

Tooltip Overview

The Tooltip displays a popup hint for a given html element.

You can define its content either as statically rendered or dynamically loaded text over AJAX.

The Tooltip wrapper for Vue is a client-side wrapper for the Kendo UI Tooltip widget.

Basic Usage

The following example demonstrates the Tooltip in action.

<div id="vueapp" class="vue-app">
    <kendo-tooltip id="tooltip" title="Tooltip content">
        Hover me
    </kendo-tooltip>
</div>
Vue.use(PopupsInstaller);
new Vue({ el: '#vueapp' })

The following example demonstrates how to create a Tooltip for multiple targets within a container. By default, the Tooltip extracts its content from the title attribute of the target element.

<div id="vueapp" class="vue-app">
    <kendo-tooltip ref="kTooltip" id="agglomerations" filter="span" :width="120" position="top">
        <span href="#" title="Los Angeles - 17,100,000" id="losangeles">Los Angeles</span>
        <span href="#" title="Osaka - 16,800,000" id="osaka">Osaka</span>
        <span href="#" title="Moscow - 16,200,000" id="moscow">Moscow</span>
    </kendo-tooltip>
</div>
Vue.use(PopupsInstaller);
new Vue({
       el: '#vueapp',
       mounted () {
           this.$refs.kTooltip.kendoWidget().show(kendo.jQuery('#osaka'))
       }
 })

Features and Functionalities

In this article