Vue js tooltip in table after the text has been cut

I have a problem making a tooltip in my vue.js document. I have tried following https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip this guide in order to make one. However this is not working for me. I have made the following code:

EDIT: UPDATED CODE

<template>
<div id="app">
<div class="row">
    <table class="table table-hover" id="socialCampaignTable">
        <thead>
            <tr>
                <th scope="col">Client</th>
                <th scope="col">Campaign</th>
                <th scope="col">Impressions</th>
            </tr>
        </thead>
    <tbody>
      <tr v-for="(campaign, index) in sortedCampaignPerformance" :key="campaign.campaignID">
        <td>{{campaign.client}}</td>
        <td id="socialCampaign">
            <div class="cut">{{campaign.campaign}}</div>
            <div class="tooltip">{{campaign.campaign}}
                <span class="tooltiptext"> {{campaign.campaign}}</span>
            </div>
        </td>
        <td>
          {{Intl.NumberFormat('da-DK').format(Math.round(campaign.impressions))}}
        </td>
      </tr>
    </tbody>
    </table>
</div>
</div>
</template>

<script>
import axios from 'axios';
export default {
props: ['campaignPerformance'],
  methods: {
  },
  computed: {
  sortedCampaignPerformance() {
    return this.campaignPerformance.sort((a, b) => b.impressions - a.impressions)
  }
  },
created() {
 },
};
</script>

<style>
  #socialCampaignTable{
   overflow-y:scroll;
   height:350px;
    display:block;
    }
   #socialCampaign .cut {
   width :625px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   }
   .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
   }

   .tooltip .tooltiptext {
     visibility: hidden;
     width: 120px;
     background-color: #555;
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 5px 0;
     position: absolute;
     z-index: 1;
     bottom: 125%;
     left: 50%;
     margin-left: -60px;
     opacity: 0;
     transition: opacity 0.3s;
    }

   .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
    }

   .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    }
</style>

I would like the tooltip to be the campaign full name, as some of the campaigns are too long to show at the table. Can anybody help here?