Sweetalert2 工具提示？

Question

我有一个问题，是否可以向警报添加工具提示？或者一些替代工具提示

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 class="fa fa-thumbs-up"></i> Great!',
  confirmButtonAriaLabel: 'Thumbs up, great!',
  cancelButtonText: '<i class="fa fa-thumbs-down"></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>

Answer 1

只需使用简单的 HTML CSS 就可以了。这是使用 HTML 和 CSS 获得所需输出的解决方案尝试下面的代码，

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

Sweetalert2 工具提示？

Sweetalert2 tooltip?

html

javascript

typescript

sweetalert

sweetalert2