我想要什么：当光标移动到"tip1"上方时，显示">这是我的tip1"的框将跟随光标。
实际显示的内容：当光标位于"tip1"上方时，显示">这是我的tip1"的框位于"tip1"下方。
代码：
$(function() {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e) {
this.myTitle = this.title;
this.title = '';
var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function() {
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e) {
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<a href="#" class="tooltip" title="this is my tooltip1">tip1.</a>
</p>这里有一个解决方案https://jsfiddle.net/6t7k96bt/1/
$(function () {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = '';
var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function () {
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function (e) {
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
});#tooltip{
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="#" class="tooltip" title="this is my tip1">tip1.</a></p>您忘记将css添加到工具提示分区。将位置添加为absolute。
希望这能奏效。
«我想在"tip1"旁边显示方框»
好的。。。然后使用span而不是div
并使用.after()而不是.append。
它会将您的消息添加到p中，就在"tip1"之后。
$(function () {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = '';
//var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";
var tooltip = "<span id='tooltip'>"+this.myTitle+"</span>";
//$("body").append(tooltip);
$(".tooltip").after(tooltip);
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function () {
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function (e) {
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="#" class="tooltip" title="this is my tip1">tip1.</a></p><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="link">
<a href="#" >tip1.</a>
<div class="tootltip">
<div class="tootltip-arrow"></div>
This is tip1
</div>
</div>
<style type="text/css">
.tootltip{
background-color: rgba(76, 76, 76, 0.62);
max-width: 100px;
max-height: 50px;
padding: 5px 5px 5px 5px;
width: auto;
height: auto;
color: white;
position: absolute;
display: none;
}
.tootltip-arrow
{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(76, 76, 76, 0.62);
position: absolute;
margin-top: -15px;
}
</style>
<script type="text/javascript">
$(".link").mouseover(function(e)
{
var tootltip = $(this).find(".tootltip");
tootltip.css("display","block");
});
$(".link").mouseout(function(e)
{
var tootltip = $(this).find(".tootltip");
tootltip.css("display","none");
});
</script>
</body>