Question

我不想在旧版应用程序中更改html结构。只是想在顶部添加javascript来添加一些ID的工具提示。

几个库如何显示选项依赖于特定的HTML结构或集成完整的工具提示库，这在旧版应用程序中很难实现。

类似的事情，但是没有添加HTML。只需找到id并应用简单的黑色背景工具提示所需的内容即可。就像StackOverflow信誉页面上的工具提示一样。

window.addEventListener("load", function () {
    var couponcodes = document.getElementsByClassName("couponcode");
    for (var i = 0; i < couponcodes.length; i++) {
        couponcodes[i].addEventListener("mouseover", function () {
            var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
            coupontooltip.removeAttribute("style");
        });
        couponcodes[i].addEventListener("mouseout", function () {
            var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
            coupontooltip.style.display = "none";
        });
    }
});

http://jsfiddle.net/mynetx/5qbP3/

如何仅使用JS / jQuery为id添加工具提示？

Answer 1

在不更改html结构的情况下为JS / jQuery添加ID的工具提示。

jQuery(function($){
     //On hover on id create tooltip element and append to that div
	 $('#add_tooltip').hover(
               function () {
                 $(this).append('<div class = "coupontooltip">Lorem Ipsum is simply dummy text of the printing</div>');
                  //display the tooltip with animation.
                 $(this).find('.coupontooltip').hide().fadeIn('slow');  

                 /*if in code already tooltip section is there
				   $(this).find('.coupontooltip').show();
			    */
               }, 
               
              //On hover out remove the tooltip. 
               function () {
                  $(this).find('.coupontooltip').remove();
                   
                  /*if in code already tooltip section is there
				   $(this).find('.coupontooltip').hide();
			      */
               }
            );
})

#add_tooltip{
	cursor: pointer;
}
.coupontooltip{
    display: inherit;
    background: black;
    width: 19px;
    /* background: #C8C8C8; */
    margin-left: 83px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width: 200px;
    height: 59px;
    color: #fff;
    top: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div id="add_tooltip">Add Tooltip</div>

仅使用JavaScript将悬停工具提示添加到ID

1 个答案: