如何使用MaterializeCSS统一初始化含相同类名的多个Tooltip？

没问题，这其实很简单，MaterializeCSS本身就支持批量初始化同一类名的Tooltip组件，我来帮你调整代码，实现统一类名、一次性初始化的需求：

1. 统一HTML元素的类名 #

首先把所有需要添加Tooltip的元素的类名统一改成tooltip，保留原有的data-position、data-tooltip等配置属性即可：

<i class="material-icons tooltip" data-position="bottom" data-tooltip="Add image">attach_file</i>
<i class="material-icons tooltip" data-position="bottom" data-tooltip="Share content">share</i>
<i class="material-icons tooltip" data-position="top" data-tooltip="Delete item">delete</i>

2. 批量初始化Tooltip组件 #

在你的JavaScript代码中，只需要用Materialize提供的M.Tooltip.init()方法，传入匹配所有.tooltip元素的选择器或DOM集合，就能一次性完成所有组件的初始化：

// 方式1：直接传入选择器字符串（推荐，更简洁）
document.addEventListener('DOMContentLoaded', function() {
  M.Tooltip.init('.tooltip');
});

// 方式2：传入DOM元素集合（适合需要先对元素做额外处理的场景）
document.addEventListener('DOMContentLoaded', function() {
  const tooltipElements = document.querySelectorAll('.tooltip');
  M.Tooltip.init(tooltipElements);
});

额外说明 #

• 如果你需要给所有Tooltip统一设置全局配置（比如统一调整延迟显示/隐藏时间），可以在初始化时传入配置对象：

M.Tooltip.init('.tooltip', {
  delay: 500, // 延迟500ms显示
  margin: 10  // 与元素的间距
});

• 确保这段JS代码是在DOM加载完成后执行的（用DOMContentLoaded事件包裹），避免因为元素还未渲染导致初始化失败。

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