Sweetaler2 tooltip?-CodePudding

I have a question, is it possible to add a tooltip to the alert? Or some alternative tooltip

Swal.fire({
  title: '<strong>HTML <u>example</u></strong>',
  icon: 'info',
  html: 'You can use <b>bold text</b>, '  
    '<a href="//sweetalert2.github.io">links</a> '  
    'and other HTML tags',
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText: '<i ></i> Great!',
  confirmButtonAriaLabel: 'Thumbs up, great!',
  cancelButtonText: '<i ></i>',
  cancelButtonAriaLabel: 'Thumbs down'
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

CodePudding user response：

Just using simple HTML CSS would definitely work. Here's a solution to get the required output just with HTML and CSS try the code below,

Swal.fire({
  title: '<strong>HTML <u>example</u></strong>',
  icon: 'info',
  html: 'You can use <b>bold text</b>, '  
    '<a href="//sweetalert2.github.io">links</a> '  
    'and other HTML tags'  
    '<br><br><button  title-new="this is how it look like">Hover here to check</button>',
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText: '<i ></i> Great!',
  confirmButtonAriaLabel: 'Thumbs up, great!',
  cancelButtonText: '<i ></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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>