Bootstrap 5.x工具提示在AngularJS控制器中不工作

gmxoilav 于 2024-01-05 发布在 Angular

关注(0)|答案(1)|浏览(199)

如果我可以借用一些谈话电台白话，“长期听众;第一次来电。”
几天来，我一直在尝试在我的网站上添加一些工具提示，我真的很喜欢Bootstrap 5.3的外观和感觉。然而，我无法让它们在我的AngularJS控制器中工作。我确实找到了如何直接使用AngularJS和/或CSS添加工具提示，但与Bootstrap 5.3中的选项相比，结果的外观让我印象深刻
我可以使用Bootstrap 5.3工具提示来处理计划HTML页面，代码如下：

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl,{delay: { "show": 1000, "hide": 100 }}))

个字符
参见this Fiddle。
我在网上四处闲逛，找到了如何用AngularJS添加工具提示。

ToolTipApp.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).hover(function(){
                // on mouseenter
                $(element).tooltip('show');
            }, function(){
                // on mouseleave
                $(element).tooltip('hide');
            });
        }
    };
});

<tr ng-repeat="x in records">
        <td>
          <h1>{{x}}</h1>
        </td>
        <td><span style="cursor:pointer" class="badge rounded-pill bg-primary" data-toggle="tooltip" data-placement="top" title="Hey, it's a tooltip!" tooltip>Edit</span></td>
      </tr>

的字符串
参见this Fiddle。
虽然它做的工作，我想使用Bootstrap 5.3的，如果可能的话。
然而，当我尝试将这两者结合在一起并在我的AngularJS控制器中使用Bootstrap 5.3工具提示时，它们不起作用。
这是我在this Fiddle中的一次尝试。
有没有人知道一种方法来做到这一点？在AngularJS控制器中使用Bootstrap 5.3工具提示？

angularjs

来源：https://stackoverflow.com/questions/77505667/bootstrap-5-x-tooltips-not-working-inside-an-angularjs-controller

1条答案

按热度按时间

jhkqcmku1#

对于Bootstrap 5.3，工具提示是通过传递元素来启动的，所以你可以在每个指令中传递元素（你可以使用data-bs-*属性，或者在options对象中传递它们）：

link: function(scope, element, attrs) {
      new bootstrap.Tooltip(element[0], {delay: {"show": 1000, "hide": 100 } });
    
  }

字符串
演示：

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Photo One",
    "Photo Two",
    "Photo Three",
    "Photo Four",
  ]
});
// ToolTipApp is the ng-app application in your web app
app.directive('tooltip', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      new bootstrap.Tooltip(element[0], {delay: {"show": 1000, "hide": 100 } });
    }
  };
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<body ng-app="myApp" ng-controller="myCtrl">
  <table>
    <tr ng-repeat="x in records">
      <td>
        <h1>{{x}}</h1>
      </td>
      <td><span style="cursor:pointer" class="badge rounded-pill bg-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Hey, it's a tooltip!" tooltip>Edit</span></td>
    </tr>
  </table>
</body>
</html>

的数据

展开查看全部

赞(0）回复(0）举报 2024-01-05

我来回答

Bootstrap 5.x工具提示在AngularJS控制器中不工作

1条答案

相关问题

热门标签

最新问答