如何调整工具提示的位置

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>