JS 实现字段悬浮提示 - 使用问号图标触发工具提示

"你可以使用HTML、CSS和JavaScript来实现这个需求。首先，在需要加问号图案的字段后面添加一个图标元素，例如一个<span>元素，并给它一个特定的类名，比如question-mark。然后，使用CSS样式来设置该图标元素的样式，使其显示为问号图案。\n\n接下来，使用JavaScript来监听该图标元素的鼠标移入和移出事件。当鼠标移入时，动态创建一个悬浮气泡元素，例如一个<div>元素，并给它一个特定的类名，比如tooltip。在这个悬浮气泡中添加需要显示的文本内容。同时，使用CSS样式来设置悬浮气泡的位置、样式和动画效果。当鼠标移出时，移除悬浮气泡元素。\n\n下面是一个示例代码：\n\nHTML:\nhtml\n<input type=\"text\" id=\"inputField\">\n<span class=\"question-mark\">?\</span>\n\n\nCSS:\ncss\n.question-mark {\n cursor: pointer;\n}\n\n.tooltip {\n position: absolute;\n display: none;\n padding: 10px;\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);\n}\n\n.tooltip:before {\n content: \"\" ;\n position: absolute;\n top: -5px;\n left: 50%;\n transform: translateX(-50%);\n border: 5px solid transparent;\n border-bottom-color: #ccc;\n}\n\n.tooltip.show {\n display: block;\n animation: fadeIn 0.3s ease-in-out;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n\nJavaScript:\njavascript\nconst questionMark = document.querySelector('.question-mark');\nconst inputField = document.getElementById('inputField');\n\nquestionMark.addEventListener('mouseenter', () => {\n const tooltip = document.createElement('div');\n tooltip.classList.add('tooltip');\n tooltip.textContent = '提示内容';\n inputField.parentNode.appendChild(tooltip);\n \n const inputRect = inputField.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const tooltipTop = inputRect.top - tooltipRect.height - 10;\n const tooltipLeft = inputRect.left + (inputRect.width / 2) - (tooltipRect.width / 2);\n \n tooltip.style.top = `${tooltipTop}px`;\n tooltip.style.left = `${tooltipLeft}px`;\n \n tooltip.classList.add('show');\n});\n\nquestionMark.addEventListener('mouseleave', () => {\n const tooltip = document.querySelector('.tooltip');\n tooltip.classList.remove('show');\n tooltip.addEventListener('animationend', () => {\n tooltip.parentNode.removeChild(tooltip);\n });\n});\n\n\n在上述代码中，我们通过querySelector和getElementById方法获取到相关的HTML元素，并使用addEventListener方法来为图标元素添加鼠标移入和移出事件的监听器。在鼠标移入事件的处理函数中，创建悬浮气泡元素并添加到输入框的父元素中，计算悬浮气泡的位置并设置样式，最后添加一个show类名来显示悬浮气泡。在鼠标移出事件的处理函数中，移除show类名并等待动画结束后移除悬浮气泡元素。\n\n你可以根据实际需求对CSS样式进行调整，以及修改JavaScript代码中的提示内容和相关元素的选择器。"