|
|
|
@ -54,4 +54,39 @@ let vue = new Vue({ |
|
|
|
|
render: h => h(App) |
|
|
|
|
}).$mount('#app') |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const style = document.createElement('style');
|
|
|
|
|
// style.type = 'text/css';
|
|
|
|
|
// style.innerHTML = `
|
|
|
|
|
// .el-tooltip__popper {
|
|
|
|
|
// max-width: 300px;
|
|
|
|
|
// word-wrap: break-word;
|
|
|
|
|
// color: white;
|
|
|
|
|
// background: #00000069;
|
|
|
|
|
// }
|
|
|
|
|
// `;
|
|
|
|
|
// document.head.appendChild(style);
|
|
|
|
|
|
|
|
|
|
document.addEventListener('mouseover', function(event) { |
|
|
|
|
const target = event.target; |
|
|
|
|
if (target && target.classList.contains('cell')) { |
|
|
|
|
if (target.scrollWidth > target.clientWidth) { |
|
|
|
|
const tooltip = document.createElement('div'); |
|
|
|
|
tooltip.className = 'el-tooltip__popper'; |
|
|
|
|
tooltip.style.position = 'absolute'; |
|
|
|
|
tooltip.style.zIndex = 9999; |
|
|
|
|
tooltip.innerText = target.innerText; |
|
|
|
|
|
|
|
|
|
document.body.appendChild(tooltip); |
|
|
|
|
|
|
|
|
|
const rect = target.getBoundingClientRect(); |
|
|
|
|
tooltip.style.top = `${rect.top - tooltip.offsetHeight}px`; |
|
|
|
|
tooltip.style.left = `${rect.left + (rect.width - tooltip.offsetWidth) / 2}px`; |
|
|
|
|
|
|
|
|
|
target.addEventListener('mouseleave', function() { |
|
|
|
|
document.body.removeChild(tooltip); |
|
|
|
|
}, { once: true }); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
export default vue; |
|
|
|
|