javascript - 悬停个人资料图片后，带有箭头的工具提示框

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

这是我的工具提示框的CSS代码

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

这是我的html代码示例

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

最佳答案

使用:: before选择器使箭头像示例一样

.tooltip-element {
  display:none;
  position:absolute;
  border:1px solid #333;
  background-color:#161616;
  border-radius:5px;
  padding:10px;
  color:#fff;
  font-size:12px Arial;
  bottom:100%;
  left:0;
}
.tooltip-element::after{
  content:'';
  position:absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 5px 0 5px;
  border-color: #161616 transparent transparent transparent;
  bottom:-8px;
  left:5px;
}
.tooltip{
  position:relative;
}
.tooltip:hover .tooltip-element{
  display:block;
}

<br><br><br><br><br><br><br>
<span class="tooltip">
<span class="tooltip-element">contnet tooltip</span>
test</span>