Sweetaler2 tooltip?

Swal.fire({
  title: '<strong>HTML <u>example</u></strong>',
  icon: 'info',
  html: 'You can use <b>bold text</b>, ' +
    '<a  +
    'and other HTML tags' +
    '<br><br><button class="tool-tip btn" title-new="this is how it look like">Hover here to check</button>',
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!',
  confirmButtonAriaLabel: 'Thumbs up, great!',
  cancelButtonText: '<i class="fa fa-thumbs-down"></i>',
  cancelButtonAriaLabel: 'Thumbs down'
})

 button {
        padding:10px;
      } 
      .tool-tip[title-new]:hover:after {
          content: attr(title-new);
          position: absolute;
          border: #c0c0c0 1px dotted;
          padding: 10px;
          display: block;
          z-index: 100000000000000000000000000000000000000000;
          background-color: #000000;
          color: #ffffff;
          max-width: 200px;
          text-decoration: none;
          text-align:center;
        margin-top:5px;
        margin-left:50px;
        }

<link  rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/npm/sweetalert2@11"></script>