JavaScript
$(document).on("mouseover", ".link-item .testDetail", function () {
let lstPosClass = ["position-nubbin-20", "position-nubbin-40", "position-nubbin-60", "position-nubbin-80"];
let objElm = $(this).siblings(".slds-popover");
objElm.css("left", "");
let lstHtmlCoordinates = objElm.closest("html")[0].getBoundingClientRect();
let lstElmCoordinates = objElm.get(0).getBoundingClientRect();
let intleftDiff = lstHtmlCoordinates.width - lstElmCoordinates.left - lstElmCoordinates.width;
if (Math.sign(intleftDiff) === -1) {
objElm.css("left", intleftDiff);
let leftVal = Math.abs(intleftDiff) + 35;
objElm.attr("data-nubbin-left", leftVal + "px");
let percent = Math.abs((leftVal / lstElmCoordinates.width) * 100);
let strNubbinClass = '';
if (percent > 20 && percent <= 40) {
strNubbinClass = "position-nubbin-20";
} else if (percent > 40 && percent <= 60) {
strNubbinClass = "position-nubbin-40";
} else if (percent > 60 && percent <= 80) {
strNubbinClass = "position-nubbin-60";
} else {
strNubbinClass = "position-nubbin-80";
}
lstPosClass.forEach(function (objClassName) {
if (objElm.hasClass(objClassName)) {
objElm.removeClass(objClassName);
}
});
objElm.addClass(strNubbinClass);
};
});
CSS
.test-page .link-item .slds-popover.position-nubbin-20:before, .slds-popover.position-nubbin-20:after {
left: 20%;
}
.test-page .link-item .slds-popover.position-nubbin-40:before, .slds-popover.position-nubbin-40:after {
left: 40%;
}
.test-page .link-item .slds-popover.position-nubbin-60:before, .slds-popover.position-nubbin-60:after {
left: 60%;
}
.test-page .link-item .slds-popover.position-nubbin-80:before, .slds-popover.position-nubbin-80:after {
left: 80%;
}
上面的代码可以正常使用2到3个弹出窗口,但是当有多个弹出窗口时失败。如何动态设置小结
该如何解决?任何想法?很抱歉,无法从弹出窗口中隐藏文本。
想法:
我认为,如果我可以掌握文本元素的边界,可以将小核放在它们之间,但是我不确定如何获取弹出窗口所在的文本元素的边界。