JS问题求助：Tooltipster仅首个Div生效，需循环生成唯一ID

看起来你的问题核心在于重复初始化Tooltipster以及代码里的几个小语法/逻辑错误，导致只有第一个触发的元素能正常工作。我来帮你一步步修复：

问题根源分析 #

1. 重复初始化：每次鼠标悬停时调用userdeitals函数，都会尝试给对应class的元素重新初始化Tooltipster。Tooltipster默认会阻止重复初始化，所以只有第一次触发的元素能正常绑定。
2. 语法错误：functionBefore的参数列表里多了个多余的逗号（helper, )），这会导致函数无法正确执行。
3. 内容赋值错误：AJAX回调里你写的是instance.content('data.user.name')，这是把字符串字面量传给了content，而不是使用返回的data对象里的真实用户名称。

修复方案一：修改现有函数，避免重复初始化 #

如果你想保留内联的onmouseover事件，可以修改userdeitals函数，先检查元素是否已经初始化过Tooltipster：

function userdeitals(id) {
  var li = document.getElementById(id);
  var tcn = '.' + li.className;
  var $element = $(tcn);
  
  // 检查元素是否已初始化Tooltipster，避免重复操作
  if (!$element.data('tooltipster')) {
    $element.tooltipster({
      content: '<span style="color:black;">רק רגע...</span>',
      updateAnimation: "fade",
      contentAsHTML: true,
      interactive: true,
      multiple: true,
      // 去掉参数列表里多余的逗号
      functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);
        var param = "?term=" + id;
        
        if ($origin.data('loaded') !== true) {
          $.get('{{route('getuser')}}' + param, function(data) {
            // 使用返回的data对象中的真实用户名称，而非字符串
            instance.content(data.user.name);
            $origin.data('loaded', true);
          });
        }
      }
    });
  }
}

修复方案二：更优的一次性初始化（推荐） #

内联事件绑定并不是最佳实践，更高效的方式是在页面加载完成后，一次性给所有需要的元素初始化Tooltipster，这样就不会有重复初始化的问题：

第一步：修改HTML，移除内联的onmouseover事件

<span style="top: 8px; left: 8px; position: absolute;" id="{{$deal->user->id}}" class="boxfor{{$deal->id}}">
  <img src="{{asset('assets')}}/users/avatars/1{{$deal->user->avatar}}" alt="user" style="width: 35px; border-radius: 30px;" class="profile-pic">
</span>

第二步：页面加载完成后批量初始化

$(document).ready(function() {
  // 选择所有class以"boxfor"开头的span元素（匹配你的动态class）
  $('span[class^="boxfor"]').each(function() {
    var $this = $(this);
    var userId = $this.attr('id'); // 获取用户ID
    
    $this.tooltipster({
      content: '<span style="color:black;">רק רגע...</span>',
      updateAnimation: "fade",
      contentAsHTML: true,
      interactive: true,
      multiple: true,
      functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);
        
        // 仅在未加载过内容时发起AJAX请求
        if ($origin.data('loaded') !== true) {
          var param = "?term=" + userId;
          $.get('{{route('getuser')}}' + param, function(data) {
            instance.content(data.user.name);
            $origin.data('loaded', true);
          });
        }
      }
    });
  });
});

为什么这个方案能解决问题？ #

• 一次性初始化所有目标元素，避免了重复调用初始化函数的问题。
• 直接通过元素的id获取用户ID，逻辑更清晰，不需要通过class反向查找。
• 修复了语法错误和内容赋值错误，确保AJAX返回的数据能正确显示在tooltip中。

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