i am using bootstrap-vue to show my data on b-table , i truncated long text and show the orginal one when hover on it by using title prop . it workes good with that and customer css but i want to use b-tooltip
<b-table hover sticky-header outlined
show-empty
small
stacked="md"
:items="apiitems"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:filterIncludedFields="filterOn"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:sort-direction="sortDirection"
@filtered="onFiltered">
<template v-slot:cell()="data">
<span :title='data.value'>{{ data.value}}</span>
</template>
</b-table>
fields: [
{ key: 'actions', label: 'Actions' , class: 'truncate1'},
{key: 'key3', label: 'label 3' , sortable: true, class: 'truncate1'},
{key: 'key4', label: 'lable 4' , sortable: true, class: 'truncate1'},
{key: 'keyn', label: 'lable n' , sortable: true, class: 'truncate1'},
],
<style>
.truncate1 {
max-width: 350px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>