Tooltip box with arrow after hovering a profile picture

Question

I am making a tooltip box which involve personal introduction text,my target is a tooltip box with Arrow is displayed if I using a mouse to hover a profile picture......... I have tried some methods online but they are not workable ...... can anyone help me?

here is my css code for the tooltip box

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

Here is my html code example

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

Possible duplicate of [Tooltip with a triangle](https://stackoverflow.com/questions/12610409/tooltip-with-a-triangle) — Durga, Aug 18 '17 at 12:41

score 3 · Answer 1 · answered Aug 18 '17 at 12:43

Use ::before selector to make the arrow like the example

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

antelove · Answer 2 · 2017-10-16T12:02:40.370

Basic Tooltips Image With Arrow

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

Tooltip box with arrow after hovering a profile picture

2 Answers2

Basic Tooltips Image With Arrow