在指定class属性的单元格添加问号按钮并显示提示信息
您可以使用以下代码来将指定class属性的单元格增加一个问号按钮,并在鼠标移入时显示提示信息:
var addBtns = document.querySelectorAll('.your-class');
addBtns.forEach(addBtn => {
var name = addBtn.innerText;
if (name && name == '近三年财务数据(单位:元人民币)') {
var parent = addBtn.parentElement;
parent.setAttribute('id', 'jbxxTop');
var titleDiv = document.getElementById('jbxxTop');
titleDiv.style.display = "flex";
var addDiv = document.createElement("div");
addDiv.style.width = "14px";
addDiv.style.height = "13px";
addDiv.style.textAlign = 'center';
addDiv.innerText = '?';
addDiv.style.backgroundColor = "#FAA825";
addDiv.style.color = "white";
addDiv.style.borderRadius = "50px";
addDiv.style.position = "relative";
addDiv.style.top = "21px";
addDiv.style.cursor = "pointer";
addDiv.style.marginLeft = "5px";
addDiv.addEventListener('mouseover', () => {
addDiv.setAttribute("data-tooltip", '近三年财务数据可选择下方2种方式之一,并根据年度审计报告或国家税务申报系统上申报的利润表和资产负债表数据正确填写
① 近3年年度财务数据. 如注册时间为2023年8月,填写2022年度(本年数据),2021年度(上年期末数据),2020年度(上上年期末数据)数据
② 近2年年度+上月末财务数据. 如注册时间为2023年8月,填写2023年7月末(本年数据),2022年度(上年期末数据) ,2021年度数据(上上年期末数据)');
addDiv.setAttribute("class", 'custom-tooltip');
const tooltip = document.createElement('div');
tooltip.classList.add('tooltip');
tooltip.innerText = addDiv.getAttribute("data-tooltip");
addDiv.appendChild(tooltip);
tooltip.style.left = (addDiv.offsetWidth / 2 - tooltip.offsetWidth / 2) + 'px';
});
addDiv.addEventListener('mouseleave', () => {
const tooltip = addDiv.querySelector('.tooltip');
if (tooltip) {
tooltip.remove();
}
});
titleDiv.appendChild(addDiv);
}
});
请将代码中的'.your-class'替换为您想要指定的class属性。
提示信息会以tooltip的形式显示在问号按钮的下方。
原文地址: https://www.cveoy.top/t/topic/qvSX 著作权归作者所有。请勿转载和采集!