tooltip（支持input输入框）

Jamie-ni

已于 2022-12-03 14:02:43 修改

阅读量644

点赞数

文章标签： javascript 前端 css

于 2022-10-30 11:04:40 首次发布

本文链接：https://blog.csdn.net/nijian43/article/details/127596934

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="tooltip.css" />
		<style type="text/css">
			* {
				box-sizing: border-box;
			}
		</style>
	</head>
	<body style="padding:1990px 20px 1990px 20px ">
		
		<div tooltip tooltipWidth='auto' inTop>2wqw</div><br>
		<div ><input type="text" tooltip tooltipWidth='auto'></div><br>
		<div style="padding-left: 333px;"><input type="text" tooltip tooltipWidth='300px' inTop></div><br>
		<div><input type="text" tooltip inTop></div><br>
		<!-- 
		tooltipWidth：代表提示框宽度，不设置的话跟表单宽度一样宽
		tooltipWidth='auto' 时文字自动撑开
		inTop： 代表提示框放在表单上面
		-->
		
		
		<!-- <div class='tooltip-box inTop' style='max-width: 155px;top:50px;left:20px'>ewrewrweewrewrweewrewrweewrewrweewrewrweewrewrweewrewrwe<div class="popper__arrow"></span></div> -->

		<script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="tooltip.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
</html>

tooltip.js

(function($) {
	const num = 10
	$('[tooltip]').mouseover(function() {
		const tagNameIsINPUT = $(this)[0].tagName === 'INPUT'
		const top = $(this).offset().top
		const left = $(this).offset().left
		const val = tagNameIsINPUT ? $(this).val() : $(this).html()
		const h = $(this).outerHeight()
		const w = $(this).outerWidth()
		const tooltipWidth = $(this).attr('tooltipWidth')
		const inTop = $(this).attr('inTop')
		const wh = window.innerHeight

		if ((tagNameIsINPUT && val) || !tagNameIsINPUT) {
			$('body').append(
				`<div class='tooltip-box ${inTop!==undefined?'inTop':''}'  style='top:${top+h+num}px;left:${left}px;width:${tooltipWidth?tooltipWidth:w+'px'};'><span class='val-span'>${val}</span><span class="popper__arrow"></span></div>`
			)
			const tooltipBoxHeight = $('.tooltip-box').outerHeight()
			if (inTop !== undefined) {
				$(".tooltip-box").css("top", `${top-tooltipBoxHeight-num}px`)
			}
			if (parseFloat(tooltipWidth) > w) {
				$(".tooltip-box .popper__arrow").addClass("arrowInLeft")
			}
		}
	}).mouseout(function() { //鼠标指针从 a标签 上离开时 发生mouseout 事件
		$(".tooltip-box").remove(); //移除对象
	})

	$('input[tooltip]').bind('input propertychange', function() {
		const val = $(this).val()
		$(".tooltip-box .val-span").html($(this).val())
		if (!val) {
			$(".tooltip-box").remove(); //移除对象
		}
	});
})(jQuery)

tooltip.css

.tooltip-parent {
	position: relative;
}

input[tooltip] {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.tooltip-box {
	/* animation: fadeInDown 0.2s ease 0s 1 both; */
	position: absolute;
	background: #fff;
	/* min-width: 150px; */
	border-radius: 4px;
	border: 1px solid #ebeef5;
	z-index: 2000;
	color: #606266;
	line-height: 1.4;
	text-align: justify;
	font-size: 14px;
	box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
	word-break: break-all;
	padding: 8px 10px;
	top: 0;
	left: 0;
	transform-origin: center top;

}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50%, 0);
		-ms-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.popper__arrow {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
	top: -6px;
	left: 50%;
	/* margin-right: 3px; */
	border-top-width: 0;
	border-bottom-color: #ebeef5;
	transform: translateX(-50%);
}
.popper__arrow.arrowInLeft{
	transform: translateX(0);
	left: 20px;
}

.popper__arrow::before {
	top: -5px;
	margin-left: -6px;
	border-top-width: 0;
	content: " ";
	border-width: 6px;
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-bottom-color: #fff;
	border-style: solid;
}

.inTop .popper__arrow {
	top: unset;
	bottom: -6px;
	transform: rotate(180deg) translateX(50%);
}