盘旋配置文件图片后带箭头的工具提示框

Question

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

这是我的工具提示框的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>

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

带箭头的基本工具提示图像

      /* --- Tooltip || Begin --- */					
      .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;      
      }

      .tooltip .tooltipText {
        visibility: hidden;
        max-width: 300px;       
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        padding: 0.5em;
							
        position: absolute;
        z-index: 1;			
							
        word-wrap: break-word;
      }

      .tooltip:hover .tooltipText {
        visibility: visible;
      }				
					
      .tooltipTextRight {	
        left: 110%;	
							
        top: 0px;
      }
      /* --- Tooltip || End --- */					
					
      /* --- Tooltip Arrow || Begin --- */					
      .tooltip .tooltipArrow::after {
        border-width: 5px;
        border-style: solid;
							
        content: "";
        position: absolute;							
      }	
					
      .tooltipArrowRight::after {
        border-color: transparent black transparent transparent; /* right */						

        top: 0px;
        right: 100%;
        margin-top: 5px;							
      }
      /* --- Tooltip Arrow || End --- */
      
      img {
        width: 200px;
        height: 200px;
        object-fit: cover;
      }

          <div class="tooltip">
            <img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" title="Name: Ching Yuet To;" /> 
            <span class="tooltipText tooltipTextRight tooltipArrow tooltipArrowRight">
              <p>Hobby: Hiking, Watching movie;</p>
              <p>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.</p>
            </span>
          </div>