操作成功的提示信息动态添加

在当前元素点击时，添加操作成功提示tips. 往往在计算tips位置时比较麻烦，工作实践中完成过此类工作，记录分享一下。

ele.addEventListener('click', function(e){
			var targetDom = e.srcElement||e.target;
			addTooltip(e, targetDom, 'CopySuccessfully');
		}, false);
function addTooltip(e, targetDom, tipsText) {
		    if (!e || !targetDom) {
		        return;
		    }

		    const tooltipDom = document.querySelector(
		        `[data-insert-tooltip-text="${tipsText}]"`
		    );
		    if (tooltipDom) {
		        tooltipDom.remove();
		    }

		    const { clientX, clientY } = e;
		    const { top, left, width, height } = targetDom.getBoundingClientRect();
		    const clientWidth = document.body.clientWidth;
		    const tooltipMargin = 4;
		    const tooltipHeight = 32;
		    const tooltipWidth = 170;
		    const position = {
		        top: parseInt(top - tooltipMargin - tooltipHeight),
		        bottom: parseInt(top + height + tooltipMargin),
		        left:
		            clientX > parseInt(tooltipWidth / 2)
		                ? parseInt(clientX - tooltipWidth / 2)
		                : clientX,
		        right: parseInt(clientX - tooltipWidth)
		    };
		    const wrap = document.createElement('div');
		    console.log(position);
		    wrap.innerHTML = `<div data-insert-tooltip="true" data-insert-tooltip-text="${tipsText}" style="
		          position: fixed;
		          border-radius: 3px;
		          background-color: #212121;
		          padding: 6px 16px;
		          display: flex;
		          align-items: center;
		          font-size: 13px;
		          color: #fff;
		          font-weight: 400;
		          white-space: nowrap;
		          top: ${position.top > 0 ? position.top : position.bottom}px;
		          left: ${
		    position.left > 0 && position.left < clientWidth
		        ? position.left
		        : position.right
		}px;
		          z-index: 2147483647;
		      ">
		        <svg
		          style="width: 16px; height: 16px; fill: #fff; margin-right: 8px;"
		          viewBox="0 0 1024 1024"
		          version="1.1"
		          xmlns="http://www.w3.org/2000/svg">
		          <path d="M512 0C229.696 0 0 229.696 0 512s229.696 512 512 512 512-229.696 512-512-229.696-512-512-512z m0 960c-246.976 0-448-201.024-448-448s201.024-448 448-448 448 201.024 448 448-201.024 448-448 448z"  />
		          <path d="M828.544 349.696L433.92 744.32 195.456 503.872a40.64 40.64 0 1 1 57.472-57.472l180.992 182.4 337.152-337.152a40.64 40.64 0 1 1 57.472 57.472v0.576z"  />
		        </svg>
		        <span>${tipsText}</span>
		    </div>`;
		    const tooltip = wrap.firstChild;
		    document.body.appendChild(tooltip);
		    setTimeout(function() {
		        tooltip && tooltip.remove();
		    }, 1500);
		}