javascript - 如何为js工具提示设置图像大小

Question

我现在正在研究基于 js 的工具提示。我找到了正确的编码作为工作的基础，但现在我正在尝试更改图像大小，但我找不到在哪里编辑它。 (主要是关于高度“自动”的某个宽度)

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>

Answer 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;
}