как настроить положение всплывающей подсказки

Question

Я разрабатываю приложение чата с использованием угловых 6

, и я хочу отобразить всплывающую подсказку при наведении на члена группы при создании группы. Проблема заключается в том, что при установке стиля всплывающей подсказки влево: 1%, всплывающая подсказка первого члена является идеальной, но эффект последнего члена в списке, поскольку половина всплывающей подсказки не отображается.

что мне нужно, это установитьпервый член css слева: 1%

и последний член справа: 20%;

selectedMemberComponent.html

 <div class="selectedMember">
 <img [src]="selectedMember.Image">
 <span class="full-name">{{selectedMember.Name}}</span>
</div>

selectedMemberComponent.css

  .selected-member .full-name {
    visibility: hidden;
    width: 150px;
    background-color: white;
    color: #d73272;
    text-align: center;
    border-radius: 6px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
    padding: 5px 0;
    position: absolute;
    z-index: 1;

  }



  .selected-member:hover .full-name {
    visibility: visible;


  }

   .selected-member span:first-child{
    left: 1%;
  }

  .selected-member span:last-child{
    right: 20%;
  }

Answer 1

Вы можете сделать это, как,

.selectedMember {
  position: relative;
}

.selectedMemberImg {
  width: 50pt;
}

.full-name {
  display: none;
  color: black;
}

.selectedMemberImg:hover+.full-name {
  display: inline;
  position: absolute;
  top: 50%;
  left: 20%;
}

.selectedMember:last-child .selectedMemberImg:hover+.full-name {  
  left: 40%;
  color: red;
}

<div class="parent">
  <div class="selectedMember">
    <img class="selectedMemberImg" src="http://tineye.com/images/widgets/mona.jpg">
    <span class="full-name">Monalisa</span>
  </div>

  <div class="selectedMember">
    <img class="selectedMemberImg" src="http://tineye.com/images/widgets/mona.jpg">
    <span class="full-name">Monalisa</span>
  </div>

  <div class="selectedMember">
    <img class="selectedMemberImg" src="http://tineye.com/images/widgets/mona.jpg">
    <span class="full-name">Monalisa</span>
  </div>

  <div class="selectedMember">
    <img class="selectedMemberImg" src="http://tineye.com/images/widgets/mona.jpg">
    <span class="full-name">Monalisa</span>
  </div>
</div>