Setting dimension in Vue Tooltip component
11 Jun 20247 minutes to read
Height and width
The Tooltip can either be assigned auto height and width values or specific pixel values. The width
and height
properties are used to
set the outer dimension of the Tooltip element. The default value for both the properties is auto
. It also accepts string and number values in pixels.
The following sample explains how to set dimensions for the Tooltip.
<template>
<div id='app'>
<div id='container'>
<ejs-tooltip id="tooltip" content="This tooltip has 180px width and 40px height" width='180px' height='40px' target="#target">
<div style="display: inline-block; position: relative; left: 50%;top: 100px;transform: translateX(-50%);">
<ejs-button id='target'>Show Tooltip</ejs-button>
</div>
</ejs-tooltip>
</div>
</div>
</template>
<script setup>
import { TooltipComponent as EjsTooltip} from "@syncfusion/ej2-vue-popups";
import { ButtonComponent as EjsButton} from "@syncfusion/ej2-vue-buttons";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
</style>
<template>
<div id='app'>
<div id='container'>
<ejs-tooltip id="tooltip" content="This tooltip has 180px width and 40px height" width='180px' height='40px' target="#target">
<div style="display: inline-block; position: relative; left: 50%;top: 100px;transform: translateX(-50%);">
<ejs-button id='target'>Show Tooltip</ejs-button>
</div>
</ejs-tooltip>
</div>
</div>
</template>
<script>
import { TooltipComponent } from "@syncfusion/ej2-vue-popups";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
export default {
name: "App",
components: {
"ejs-tooltip":TooltipComponent,
"ejs-button":ButtonComponent
},
data() {
return {
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
</style>
Scroll mode
When height
is specified with a certain pixel value and the Tooltip content overflows, the scrolling mode gets enabled.
<template>
<div id='app'>
<ejs-tooltip id='tooltip' :content='content' target='#target' width='300px' height='60px' isSticky='true'>
<p>A green home is a type of house designed to be <a id="target"><u>environmentally friendly</u></a>
and sustainable. And also focuses on the efficient use of "energy, water, and building materials." As green homes
have become more prevalent we have also seen the emergence of green affordable housing.
</p>
</ejs-tooltip>
</div>
</template>
<script setup>
import { TooltipComponent as EjsTooltip } from "@syncfusion/ej2-vue-popups";
import { createApp } from 'vue';
const app = createApp();
var demoVue = app.component("tooltipContent", {
template: `
<div id="tooltipContent"><p><strong>Environmentally friendly</strong> or <strong>environment-friendly</strong>, <i>(also referred to as eco-friendly, nature-friendly, and green)</i> are marketing and sustainability terms referring to goods and services, laws, guidelines and policies that inflict reduced, minimal, or no harm upon ecosystems or the environment.</p></div>`,
data() {
return {
data: {}
};
}
});
const content = () => {
return { template: demoVue }
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#tooltipContent {
padding: 0 10px;
font-weight: 400;
font-size: 12px;
line-height: 22px;
}
</style>
<template>
<div id='app'>
<ejs-tooltip id='tooltip' :content='content' target='#target' width='300px' height='60px' isSticky='true'>
<p>A green home is a type of house designed to be <a id="target"><u>environmentally friendly</u></a>
and sustainable. And also focuses on the efficient use of "energy, water, and building materials." As green homes
have become more prevalent we have also seen the emergence of green affordable housing.
</p>
</ejs-tooltip>
</div>
</template>
<script>
import { TooltipComponent } from "@syncfusion/ej2-vue-popups";
import { createApp } from 'vue';
const app = createApp();
var demoVue = app.component("tooltipContent", {
template: `
<div id="tooltipContent"><p><strong>Environmentally friendly</strong> or <strong>environment-friendly</strong>, <i>(also referred to as eco-friendly, nature-friendly, and green)</i> are marketing and sustainability terms referring to goods and services, laws, guidelines and policies that inflict reduced, minimal, or no harm upon ecosystems or the environment.</p></div>`,
data() {
return {
data: {}
};
}
});
export default {
name: "App",
components: {
"ejs-tooltip": TooltipComponent
},
data: function () {
return {
content: function () {
return { template: demoVue }
}
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#tooltipContent {
padding: 0 10px;
font-weight: 400;
font-size: 12px;
line-height: 22px;
}
</style>
The scrolling mode can best be seen when the sticky mode of the Tooltip is enabled. To enable sticky mode, set the
isSticky
property to true.