封装基于Jquery的鼠标移入弹框组件（可换行,可自定义样式）

jquery项目，bootsrtape自带的鼠标移入弹框组件无法满足大段换行文字的需求，实现了一个

 

样式部分

.tjfInformations{
			position: relative;
			font-style: normal;
			cursor: pointer;
		}
.tjfInformations>.contentbox-top{
		   z-index: 1099;
			background-color: #fff;
			color: #000;
			position: absolute;
			left:50%;
			top:-15px;
			transform: translate(-50%,-100%);
			width: 150px;
			border: 1px solid #000;
			border-radius:6px;
			padding: 5px;
		}
.tjfInformations .triangle-top{
			position: absolute;
			left: 50%;
			top: 100%;
			transform: translate(-50%,0);
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-top: 10px solid black;
		}
.tjfInformations>.contentbox-bottom{
			z-index: 1099;
			background-color: #fff;
			color: #000;
			position: absolute;
			left:50%;
			transform: translate(-50%,15px);
			width: 150px;
			border: 1px solid #000;
			border-radius:6px;
			padding: 5px;
		}
.tjfInformations .textline{
		  line-height: 20px;
		  text-align: start;
		  font-size: 13px;
		}

.tjfInformations .triangle-bottom{
			position: absolute;
			left: 50%;
			top: 0px;
			transform: translate(-50%,-100%);
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-bottom: 10px solid black;
		}

js部分

tjfaddInformation()
	
	
		function tjfaddInformation(){
			$('.tjfInformations').each(function(index, ele){
				$(ele).on('mouseover',function(){
					let position = $(ele).attr('tjfposition')
					let content = $(ele).attr('tjftitle')
					let arr = content.split('</br>')
					// 对盒子位置进行判断
					if(position == 'bottom'){ // 下盒子
						let tjfdiv = $('<div class="contentbox-bottom">')
						let tjftextdiv = $('<div class="textbox">')
						let triangle = $('<div class="triangle-bottom">')
						tjftextdiv.append(triangle)
						arr.forEach(function(ele, index){
							let tjfcontent = $('<div class="textline">').html(ele)
							tjftextdiv.append(tjfcontent)
						})
						tjfdiv.append(tjftextdiv)
						$(ele).append(tjfdiv)
					} else if(position == 'top') { // 上盒子
						let tjfdiv = $('<div class="contentbox-top">')
						let tjftextdiv = $('<div class="textbox">')
						let triangle = $('<div class="triangle-top">')
						tjftextdiv.append(triangle)
						arr.forEach(function(ele, index){
							let tjfcontent = $('<div class="textline">').html(ele)
							tjftextdiv.append(tjfcontent)
						})
						tjfdiv.append(tjftextdiv)
						$(ele).append(tjfdiv)
					}
					// 对盒子的样式进行处理
					let tjfstyle = $(ele).attr('tjfstyle') ? $(ele).attr('tjfstyle').split(';') : ''
					if(tjfstyle){
						tjfstyle.forEach(function(eles,index){
							let attr = eles.split(':')[0]
							let value = eles.split(':')[1]
							if(position == 'top'){
								$(ele).find('.contentbox-top').css(attr,value)
							} else if(position == 'bottom'){
								$(ele).find('.contentbox-bottom').css(attr,value)
							}
						})
					}
					
				})
				$(ele).on('mouseout',function(){
					$(ele).find('.contentbox-top, .contentbox-bottom').remove()
				})
		})
	}

使用说明

	tjfposition属性支持top,bottom两种
	tjfstyle属性支持样式书写，格式为tjfstyle="background-color: #ccc;color: #000"
	tjftitle属性支持内容书写，添加</br>可换行"




<i class="tjfInformations" tjfposition="top" tjfstyle="color: red;width: 200px" tjftitle="1.一曲肝肠断</br>2.天涯何处觅知音">可以</i>
		
<i class="tjfInformations" tjfposition="bottom" tjftitle="标题<br>天不生夫子</br>剑道万古如长夜">剑道</i>

效果图