Tengo una pregunta, ¿es posible agregar una información sobre herramientas a la alerta? O alguna información sobre herramientas alternativa
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>Simplemente usar HTML CSS simple definitivamente funcionaría. Aquí hay una solución para obtener el resultado requerido solo con HTML y CSS, pruebe el código a continuación,
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>