我现在正在使用基于js的工具提示。 我找到了正确的编码作为工作的基础，但现在我试图改变图像大小，虽然我无法找到编辑它的位置。 （它主要是关于某个宽度，其中高度为＆＃34;自动＆＃34;）
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});#tooltip {
position: absolute;
background: transparent;
color: #333;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>" >TEXTS</a>
<br>
<br>
<br>
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>" >TEXTS</a>
答案 0 :(得分：1)
为图片添加宽度
<img width='200' src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>
OR
<img style='width:200px;' src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>
答案 1 :(得分：1)
它是tooltip的孩子。请尝试此css规则#tooltip img
工作示例
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});#tooltip {
position: absolute;
background: transparent;
color: #333;
display: none;
}
#tooltip img{
width:250px;
height:200px; /* change as your wish */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>" >TEXTS</a>
<br>
<br>
<br>
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>" >TEXTS</a>
另一种可能的方法
内联方法
<a href="#" class="tooltip" title="<img width="100px" height="100px" src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>" >TEXTS</a>
使用classname或id与img
<a href="#" class="tooltip" title="<img id="img" src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>" >TEXTS</a>
<强> CSS
#img{
width:250px;
height:200px;
}
答案 2 :(得分：1)
只需使用宽度和图像属性即可。我已将它们添加到第二张图像上进行比较
工作代码
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});#tooltip {
position: absolute;
background: transparent;
color: #333;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>" >TEXTS</a>
<br>
<br>
<br>
<a href="#" class="tooltip" title="<img width='200px' height='300px' src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>" >TEXTS</a>
答案 3 :(得分：0)
问题在于工具提示中的img，它位于p标记内。
要进行调整，请使用#tooltip img作为选择器。
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip img").css("width", "150px");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});#tooltip {
position: absolute;
background: transparent;
color: #333;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>" >TEXTS</a>
<br>
<br>
<br>
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>" >TEXTS</a>
答案 4 :(得分：0)
您需要在CSS中更改它：
#tooltip {
position: absolute;
background: transparent;
color: #333;
display: none;
max-width: 100px; /* 100px as an example */
}