Как добавить стрелку влево, как всплывающую подсказку, в поля из цикла в angularjs

Question

У меня есть какая-то ссылка Click-1, Click-2 и т. Д., Когда я нажимаю на нее, появится соответствующее окно.Эта коробка уже имеет абсолютную позицию.Я хочу добавить маленькую стрелку на левой стороне каждого поля, которая должна быть похожа на всплывающую подсказку, я уже использовал формы CSS, но это невозможно с тем же div, для этого мне нужно создать другой div и поставить абсолютную позицию, но это былоне подходит правильно. Вот код ниже.https://plnkr.co/edit/jv7uKHlryMnkJgK9wVM6?p=preview

html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="maindiv" ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in data" >
       <div ng-click="setActiveItem(x)" class="id">Click-{{x.id}}</div>
       &nbsp;&nbsp;&nbsp;ssssssssssss
       <div class="arrow_box name" ng-show="activeItem==x">
       <h3>{{x.name}}<h3>
       <p>Hello world</p>
       <h3>{{x.name}}<h3>
       <p>Hello world</p>
       <h3>{{x.name}}<h3>
       <p>Hello world</p>
       </div>
    </li>
  </ul>  
</div>
  </body>

</html>

CSS

ul li{
list-style-type:none;
cursor:pointer;
}
ul{
margin:0;
}
.maindiv{
position:relative;
}
.name{
position: absolute;
    left: 97px;
    background: #fff;
    border: 1px solid;
    width: 61px;
    height: 202px;
    overflow: auto;
    width: 24%;
}
.arrow_box {
    position: absolute;
    background: #ffffff;
    border: 1px solid #ccc;
}
.arrow_box:after, .arrow_box:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000000;
    border-width: 5px;
    margin-top: -5px;
}
.arrow_box:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000000;
    border-width: 8px;
    margin-top: -8px;
}
.id,name{
float:left;
}

SCRIPT

var data = [{"name":"name1","title":"title1","id":"1"},{"name":"name2","title":"title2","id":"2"},{"name":"name3","title":"title3","id":"3"}];
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.data = data;

  $scope.setActiveItem = function(item){
     $scope.activeItem = item;
  }

  // show first on page load
  // $scope.activeItem = data[0];

});// Code goes here

Answer 1

Добавьте этот фрагмент CSS в ваш style.css:

.arrow_box {
    position: relative;
    background: #ffffff;
    border: 2px solid #000000;
}
.arrow_box:after, .arrow_box:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000000;
    border-width: 5px;
    margin-top: -5px;
}
.arrow_box:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000000;
    border-width: 8px;
    margin-top: -8px;
}

Вместо name css class, вызовите arrow_box class

 <ul>
    <li ng-repeat="x in data" >
       <span ng-click="setActiveItem(x)" class="id">Click-{{x.id}}</span>
       &nbsp;&nbsp;&nbsp;ssssssssssss<span class="arrow_box" ng-show="activeItem==x">{{x.name}}</span>
    </li>
  </ul>  

Проверьте здесь код плунжера