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

-1

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

.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>

来源

2017-08-18 Alan Chiu

您的css类是工具提示，但您使用的是class =“masterTooltip” –

我没有在您的css中看到任何光标....使用类似cursor：help; –

你可能不应该把这么多的数据放到一个html属性中......除非使用一些模板引擎，否则它会使维护/可读性变得很糟糕。更不用说如果文本在文本中使用引用结束了可能的破坏。 –

就像在我的评论说以上，你的CSS类是工具提示，但使用的是类=“masterTooltip”加游标类型缺失也是如此。

只需选中下面的代码，它的工作原理，你可以修改，以满足您的需求：

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Document</title> 
 
    <style> 
 
    .tooltips { 
 
\t \t \t border-bottom: 1px dotted #000000; color: #000000; outline: none; 
 
\t \t \t cursor: help; text-decoration: none; 
 
\t \t \t position: relative; 
 
\t \t } 
 
\t \t .tooltips span { 
 
\t \t \t margin-left: -999em; 
 
\t \t \t position: absolute; 
 
\t \t } 
 
\t \t .tooltips:hover span { 
 
\t \t \t border-radius: 3px 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; 
 
\t \t \t 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); 
 
\t \t \t font-family: Calibri, Tahoma, Geneva, sans-serif; 
 
\t \t \t position: absolute; left: 1em; top: 2em; z-index: 99; 
 
\t \t \t margin-left: 0; width: 210px; 
 
\t \t } 
 
\t \t .classic { padding: 0.5em 1em; } 
 
\t \t * html a:hover { background: transparent; } 
 
\t \t .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>

来源

2017-08-18 18:20:03

只有代码转储的答案在教学中没有帮助，请解释您添加/更改的内容，为什么这些添加/更改应该工作等等。 –

我已经说过，在我的评论中，将更新我的答案以及他们 –

你可以改变它的显示方式，并考虑一个稳定的位置，旁边的照片显示 “工具提示”

$(".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>

来源

2017-08-18 18:23:45

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

回答

相关问题