此代码在我的 angularjs 文件中不起作用：
angular.element('document').ready(function() { $('.tooltipped').tooltip({delay: 50}); });
但是，当我在内部放置警报时，它会弹出警报消息。工具提示代码无法正常工作，尽管我包括了所有必需的物质化 CSS 和 JS 文件。当我为静态元素使用相同的代码时，它可以正常工作，但不使用动态元素。
那是因为Angularjs重新启动模板，因此DOM不再相同，并且没有附加插件。当使用Angulajs时，jQuery插件大多是由于此而无法工作的，因此您必须创建一个指令以允许AngularJS编排插件初始化，因此当您动态添加新元素时，它应用了插件。
。尝试这样的事情：
app.directive('tooltipped', function (){
return {
restrict: 'C',
link: function (scope, elem, attrs) {
$(elem[0]).tooltip({delay: 50}); });
}
};
});
您可以为此尝试：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$('#age').tooltip({delay: 50});
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>