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