Hi Joao,
Greetings from Syncfusion support.
Based on the shared details, we understand that your
requirement is to display a Tooltip for each ListView item on your end. To
fulfill this requirement, you can utilize the Tooltip component's beforeRender
event to identify the relevant target element within the ListView component,
extract its text content, and then assign it to the content
of the Tooltip.
Refer to the below code snippets.
|
[App.vue]
<template>
<div>
<ejs-tooltip target=".e-list-item" :content="content" position='RightCenter' :beforeRender="onBeforeRender">
<div id = 'flat-list'>
<h4>Flat List</h4>
<ejs-listview id='sample-list-flat' :dataSource='data' :template="'template'">
<template v-slot:template="{data}" >
<div class="e-list-wrapper">
<span class="e-list-item-content">{{data.text}}</span>
</div>
</template>
</ejs-listview>
</div>
</ejs-tooltip>
</div>
</template>
…
<script>
…
export default {
…
data: function() {
return {
content: "Loading..",
data: flatData,
};
},methods: {
onBeforeRender: function(args){
this.content = args.target.querySelector('.e-list-item-content').textContent;
}
}
}
</script>
|
For your reference, we have attached the sample.
Sample: https://stackblitz.com/edit/18jmrj-1xeftm?file=src%2FApp.vue
Check out the attached sample and let us know if you need
any further assistance.
Regards,
Prasanth Madhaiyan.
