Home » vue » Bootstrap-vue using b-tooltip on b-table

Bootstrap-vue using b-tooltip on b-table

Posted by: admin November 26, 2021 Leave a comment

Questions:

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>
Answers:

using v-b-tooltip directive worked like a charm.

  <!-- Main table element -->
    <b-table hover  sticky-header outlined
      show-empty
      small
      stacked="md"
      :items="apiitems"
      :fields="fields"
   
    >
  <template v-slot:cell()="data">
        <span v-b-tooltip.hover :title=data.value>{{ data.value}}</span>
      </template>

    
    </b-table>

reference: here