使用jQuery在工具提示中显示表

Question

我试图在工具提示（div，table，...）中显示HTML代码，但它没有显示，也没有显示任何错误。 如果我在<span>标记中使用了一些文本，它就能正常工作。但我需要在其中插入更多HTML代码。我该如何解决？ 仅适用于<span>代码，我不知道如何解决此问题，任何帮助？为什么会这样？

＆＃13;

＆＃13;

$(document).ready(function() {
	//Tooltips
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip		  
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; //Get X coodrinates
		var mousey = e.pageY + 20; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
		
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
		  
		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 20;
		} 
		tip.css({  top: mousey, left: mousex });
	});
});

＆＃13;

body {
	margin: 0; padding: 0;
	font: normal 12px Verdana, Geneva, sans-serif;
	line-height: 1.8em;
	color: #333;
}
	
* {
	outline: none;
}
img {border: none;}

a {color: #d60000; text-decoration: none;}

/*--Tooltip Styles--*/
.tip {
	display: inline-block;
	color: #fff;
	background:#1d1d1d;
	display:none; /*--Hides by default--*/
	padding:10px;
	position:absolute;	z-index:1000;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p style="text-align:left;">My First
		<a href="#" class="tip_trigger">Link 
			<span class="tip">
				Some text. Works correctly!
			</span>
		</a>
</p>
<p style="text-align:left;">My Second
		<a href="#" class="tip_trigger">Link 
			<div class="tip">
				<table><tr><td>More text. Doesn't work!</td></tr></table>
			</div>
		</a>
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的问题在于您放入其他元素的元素类型。

例如：

你不能把＆lt; div＆gt;在＆lt; a＆gt;内或者＆lt; p＆gt;

见这里：Putting <div> inside <p> is adding an extra <p>

我用一个工作代码更新了你的示例代码。

$(document).ready(function() {
	//Tooltips
	$(".tip_trigger").hover(function(){
		tip = $(this).siblings('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip		  
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; //Get X coodrinates
		var mousey = e.pageY + 20; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
		
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
		  
		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 20;
		} 
		tip.css({  top: mousey, left: mousex });
	});
});

body {
	margin: 0; padding: 0;
	font: normal 12px Verdana, Geneva, sans-serif;
	line-height: 1.8em;
	color: #333;
}
	
* {
	outline: none;
}
img {border: none;}

a {color: #d60000; text-decoration: none;}

/*--Tooltip Styles--*/
.tip {
	display: none;
	color: #fff;
	background:#1d1d1d;
	display:none; /*--Hides by default--*/
	padding:10px;
	position:absolute;	z-index:1000;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p style="text-align:left;">My First
		<a href="#" class="tip_trigger">Link 
		</a>
    <span class="tip">
				Some text. Works correctly!
		</span>
</p>
<div style="text-align:left;">My Second
		<a href="#" class="tip_trigger">Link</a>
    <div class="tip">
				<table><tr><td>More text. Doesn't work!</td></tr></table>
		</div>
</div>