编写可以为ay html元素调用的工具提示。应由标题、内容、确定按钮3个元素组成

编写可以为任何 HTML 元素调用的工具提示，可以使用以下步骤：

首先，创建一个 HTML 文件，并在 <head> 标签中引入必要的 CSS 和 JavaScript 文件。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="tooltip.css">
    <script src="tooltip.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

在 HTML 文件中，为需要添加工具提示的元素添加一个唯一的 ID 属性。

<span id="tooltip-example">Hover over me</span>

创建一个 CSS 文件（例如 tooltip.css），用于定义工具提示的样式。

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

创建一个 JavaScript 文件（例如 tooltip.js），用于实现工具提示的功能。

window.addEventListener('DOMContentLoaded', function() {
    var tooltipElement = document.getElementById('tooltip-example');
    var tooltipText = 'This is a tooltip example';

    tooltipElement.addEventListener('mouseover', function() {
        var tooltip = document.createElement('div');
        tooltip.className = 'tooltiptext';
        tooltip.textContent = tooltipText;
        tooltipElement.appendChild(tooltip);
    });

    tooltipElement.addEventListener('mouseout', function() {
        var tooltip = tooltipElement.querySelector('.tooltiptext');
        tooltipElement.removeChild(tooltip);
    });
});