Question

我正在制作一个涉及个人介绍文字的工具提示框，我的目标是一个工具提示框，如果我使用鼠标悬停个人资料图片，则会显示箭头.........我在线尝试了一些方法但它们不可行......任何人都可以帮助我吗？

.tooltip {
   display:none;
   position:absolute;
   border:1px solid #333;
   background-color:#161616;
   border-radius:5px;
   padding:10px;
   color:#fff;
   font-size:12px Arial;
}

<table style="width:100%">
<tr>
<td><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" title="Name: Ching Yuet To; 


Hobby: Hiking, Watching movie;

I believe that it would be fun that we can carry out research study 
independently. I think it is meaningful to participate and promote synthetic 

biology research.

I can learn a lot and make many international friends in Boston! "></td>

Answer 1

如上面的评论所述，您的css类是工具提示，但您使用的是class =＆＃34; masterTooltip＆＃34;加上光标类型也不见了。

只需检查以下代码即可，您可以修改以满足您的需求：

＆＃13;

<!doctype html>
<html lang="en">
 <head>
  <title>Document</title>
  <style>
  .tooltips {
			border-bottom: 1px dotted #000000; color: #000000; outline: none;
			cursor: help; text-decoration: none;
			position: relative;
		}
		.tooltips span {
			margin-left: -999em;
			position: absolute;
		}
		.tooltips:hover span {
			border-radius: 3px 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; 
			box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
			font-family: Calibri, Tahoma, Geneva, sans-serif;
			position: absolute; left: 1em; top: 2em; z-index: 99;
			margin-left: 0; width: 210px;
		}
		.classic { padding: 0.5em 1em; }
		* html a:hover { background: transparent; }
		.classic {background: #007DC3; border: 1px solid #FFAD33; color:#fff;}
  </style>
 </head>
 <body>

 <table style="width:100%">
<tr>
<td><a class="tooltips" href="#"><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" title="">
<span class="classic">Name: Ching Yuet To; 


Hobby: Hiking, Watching movie;

I believe that it would be fun that we can carry out research study 
independently. I think it is meaningful to participate and promote synthetic 

biology research.

I can learn a lot and make many international friends in Boston! "></span></a>
</td>
</tr>
</table>
  
 </body>
</html>

＆＃13;

Answer 2

您可以更改其显示方式，并考虑照片旁边的稳定位置以显示“工具提示”

$(".masterTooltip").on("mouseover",function(event){
  $(".tooltip").remove();
  var TooltipTitle=$(this).attr("Tooltip-title");
  var tooltip=$("<span/>",{class:"tooltip",html:TooltipTitle,css:{top:event.pageY,left:event.pageX}});
  $("body").append(tooltip);
  tooltip.fadeIn();
});
$(".masterTooltip").on("mouseleave",function(event){
    $(".tooltip").fadeOut();
});

.tooltip {
display:none;
   position:absolute;
   border:1px solid #333;
   background-color:#161616;
   border-radius:5px;
   padding:10px;
   color:#fff;
   font-size:12px Arial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<td><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" Tooltip-title="Name: Ching Yuet To; 


Hobby: Hiking, Watching movie;

I believe that it would be fun that we can carry out research study 
independently. I think it is meaningful to participate and promote synthetic 

biology research.

I can learn a lot and make many international friends in Boston! "></td>

当我使用鼠标悬停个人资料图片时带有箭头的工具提示框

2 个答案: