Показать список в виде таблицы на Hover?

Question

У меня есть следующая ситуация для проекта, над которым я работаю:

В настоящее время при наведении курсора на «Idle HF» (из изображения) я получаю список, отображаемый со значениями, разделенными запятыми. Мне нужно, чтобы это было в таблице, каждое значение в одной строке, и мне нужно добиться этого с помощью Angular JS.

Любая помощь будет принята с благодарностью.

По запросу:

  <p-column field="tdst" header="TDST" [style]="{'text-align': 'left'}">
    <ng-template let-row="rowData" pTemplate="body">
      <span title = {{row.tdlist}}>{{row.tdst}}</span>
    </ng-template>
  </p-column>

В коде tdlist - это список Python, который я выбираю для отображения при наведении. tdst - значение столбца, для которого должно быть реализовано свойство hover

Answer 1

Вы можете попробовать использовать ui.bootstrap всплывающих подсказок .Они могут извлекать шаблон, заполнять его вашим массивом и отображать его при вызове hover / click / function.Вот небольшая демонстрация:

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.array = [1, 2, 3, 4, 5];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div ng-app="myApp" ng-controller="myCtrl">

  <span uib-tooltip-template="'template.html'" tooltip-placement="bottom-right" tooltip-trigger="'mouseenter'">Idle HF (in a table)</span>

  <script type="text/ng-template" id="template.html">
    <table class="table">
      <tr>
        <th>Values</th>
      </tr>
      <tr ng-repeat="x in array">
        <td>{{ x }}</td>
      </tr>
    </table>
  </script>

</div>

Ваш шаблон может быть отдельным файлом, который вы можете украсить так, как вам удобно.