js实现元素气泡

当表格中文本过多时，我们往往采用省略号的代替，鼠标滑过时用气泡展示全部内容。iview等UI框架自带有改组件，今天我们将用原生js实现改功能。
1、最终效果如下：

2、HTML

<div class="has-select-dropdown">
	出发地：<input type="text" v-model="searchForm.start" class="city" placeholder="出发地"/>
	目的地：<input type="text" v-model="searchForm.end" class="city" placeholder="目的地"/>
</div>

3、js

// 出发地、目的地、交通工具气泡
		let htmlDom = `<div class="ivu-poptip-content">
			<div class="ivu-poptip-arrow"></div>
			<div class="ivu-poptip-inner">
				<div class="ivu-poptip-body">
					<div class="ivu-poptip-body-content">
						<div class="ivu-poptip-body-content-inner"></div>
					</div>
				</div>
			</div>
		</div>`
		var elem=document.createElement('div');
		elem.setAttribute('class',"ivu-poptip-popper")
		elem.setAttribute('id',"travlCity")
		elem.setAttribute('x-placement',"top")
		elem.style.display = "none";
		elem.innerHTML = htmlDom;
		document.body.appendChild(elem);
		
		var cityDom = document.querySelectorAll(".has-select-dropdown")[0];
		if(cityDom){
			cityDom.addEventListener('mouseover', function (ev) {
				var ev = ev || window.event;
				var target = ev.target || ev.srcElement;
				if(target.placeholder == "出发地" || target.placeholder == "目的地" || target.placeholder == "交通工具"){
					let val = ev.target.value;
					if(val){
						let popTip = document.getElementById('travlCity');
						if(popTip){
							popTip.querySelectorAll('.ivu-poptip-body-content-inner')[0].innerHTML = val;
							popTip.style.display = "block";
							popTip.style.top = ev.target.getBoundingClientRect().top + document.documentElement.scrollTop - 55 + "px";
							popTip.style.left = ev.target.getBoundingClientRect().left + target.offsetWidth/2 - popTip.offsetWidth/2 + "px"
						}
					}
				}
			});
			cityDom.addEventListener('mouseout', function (ev) {
				var ev = ev || window.event;
				var target = ev.target || ev.srcElement;
				if(target.placeholder == "出发地" || target.placeholder == "目的地" || target.placeholder == "交通工具"){
					let popTip = document.getElementById('travlCity');
					if(popTip){
						popTip.style.display = "none";
					}
				}
			});
		}

4、css

</style lang="less">
	body{
		.ivu-poptip-popper {
			min-width: 150px;
			display: block;
			visibility: visible;
			font-size: 12px;
			line-height: 22px;
			position: absolute;
			z-index: 1060;
		}
		.ivu-poptip-popper[x-placement=top] .ivu-poptip-arrow {
			left: 50%;
			margin-left: -7px;
			bottom: 3px;
			border-width: 7px 7px 0;
			border-top-color: hsla(0,0%,85%,.5);
		}
	}
	
<style>