當我用鼠標懸停個人資料圖片時，帶有箭頭的工具提示框

-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

當我用鼠標懸停個人資料圖片時，帶有箭頭的工具提示框

回答

相關問題