如何在Bootstrap Tooltip中展示数组全部元素（Angular场景）

我明白你的需求——你不想重复整个<a>标签，而是希望在单个tooltip里展示数组的所有元素，而不是只取第一个或者用ng-repeat生成多个链接。下面是两种实用的解决方案：

方法1：纯文本换行展示（简单直接） #

这种方法适合不需要复杂样式的场景，把数组元素用换行符拼接，然后通过CSS让tooltip识别换行：

步骤1：自定义Angular过滤器转换数组 #

先创建一个过滤器，把数组转换成每行一个元素的字符串：

angular.module('yourAppName').filter('arrayToLines', function() {
  return function(array) {
    // 处理非数组的情况
    if (!Array.isArray(array)) return array || '';
    // 用换行符拼接所有元素
    return array.join('\n');
  };
});

步骤2：修改模板并添加CSS #

在模板里使用这个过滤器，同时添加CSS让tooltip支持换行：

<a style="color:green;" 
   data-toggle="tooltip" 
   data-placement="top" 
   title="{{el.ingredientLines | arrayToLines}}">
  {{el.ingredientLines.length}}
</a>

添加CSS样式确保换行生效：

.tooltip-inner {
  white-space: pre-line; /* 识别换行符并自动换行 */
  max-width: 300px; /* 可选：限制tooltip宽度，避免太宽 */
}

方法2：HTML列表展示（更美观，符合截图效果） #

如果想要像你期望的那样的列表样式，可以生成HTML列表并让tooltip支持HTML内容：

步骤1：自定义生成HTML列表的过滤器 #

这个过滤器会把数组转换成<ul>列表，并且用$sce确保HTML内容安全：

angular.module('yourAppName').filter('arrayToList', function($sce) {
  return function(array) {
    if (!Array.isArray(array)) return '';
    // 生成每个<li>元素
    const listItems = array.map(item => `<li>${item}</li>`).join('');
    // 返回信任的HTML内容
    return $sce.trustAsHtml(`<ul style="margin:0; padding-left:20px;">${listItems}</ul>`);
  };
});

步骤2：修改模板并启用HTML tooltip #

需要设置data-html="true"，并把生成的HTML绑定到tooltip的标题属性：

<a style="color:green;" 
   data-toggle="tooltip" 
   data-placement="top" 
   data-html="true"
   data-original-title="{{el.ingredientLines | arrayToList}}">
  {{el.ingredientLines.length}}
</a>

关键提醒：确保Tooltip正确初始化 #

别忘了在Angular应用里初始化Bootstrap Tooltip，比如在run块里：

angular.module('yourAppName').run(function($rootScope, $timeout) {
  // 视图加载完成后初始化tooltip
  $rootScope.$on('$viewContentLoaded', function() {
    $timeout(() => {
      $('[data-toggle="tooltip"]').tooltip();
    });
  });
});

为什么不用ng-repeat？ #

ng-repeat是用来重复DOM元素的，你如果用它套在<a>标签上，会生成和数组元素数量一样多的链接，这显然不是你要的效果。我们的思路是处理数组内容，而不是重复DOM，这样就能在单个tooltip里展示所有元素啦。

内容的提问来源于stack exchange，提问作者StefanBRT