Manupulate css "content: attr(data-tooltip)" with jquery

Question

For my checkout buttons (buy now | add to cart) i have different tooltips like:

1. Variants like color, size etc not set
   
2. If not logged in, buy now button message

For second option i use together with data-tooltip "data-tooltip2".
If first option pass id like to write tooltip2 data into tooltip data and show this content.

The problem im not able to overwrite the content for css, the text is unchanged. If i console.log the data-tooltip i recieve the correct one.

Simple code example:

var nodirectcheckout = $('.info').data('tooltip2');
$('.info').data('tooltip', nodirectcheckout);
console.log($('.info').data('tooltip'));

.center{
  text-align:center;
  margin-top: 100px;
}

.info{
    display: inline;
}

.info:hover::before{
    background: #333;
    background: rgba(75,75,75, 0.85);
    border-radius: 5px;
    color: #fff;
    content: attr(data-tooltip);
    padding: 10px 15px;
    position: absolute;
    z-index: 999;
    width: 250px;
	margin-left: -78px;
    transform: translateY(calc(-100% - 12px));
}
.info:hover::after{
    border: solid;
    border-color: #4b4b4b transparent;
    border-width: 12px 12px 0 12px;
    content: "";
    position: absolute;
    z-index: 99;
    transform: translateX(-100%) translateY(-100%)
}

   

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center">
  <a class="info" data-tooltip="This is a test" data-tooltip2="Test number 2"> Test</a>
</div>

Answer 1

Try using attr() method

Using the data() method to update data does not affect attributes in the DOM

var nodirectcheckout = $('.info').data('tooltip2');
$('.info').attr('data-tooltip', nodirectcheckout);
console.log($('.info').data('tooltip'));

.center{
  text-align:center;
  margin-top: 100px;
}

.info{
    display: inline;
}

.info:hover::before{
    background: #333;
    background: rgba(75,75,75, 0.85);
    border-radius: 5px;
    color: #fff;
    content: attr(data-tooltip);
    padding: 10px 15px;
    position: absolute;
    z-index: 999;
    width: 250px;
	margin-left: -78px;
    transform: translateY(calc(-100% - 12px));
}
.info:hover::after{
    border: solid;
    border-color: #4b4b4b transparent;
    border-width: 12px 12px 0 12px;
    content: "";
    position: absolute;
    z-index: 99;
    transform: translateX(-100%) translateY(-100%)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center">
  <a class="info" data-tooltip="This is a test" data-tooltip2="Test number 2"> Test</a>
</div>