吹き出しの中身に関連したデータを表示させたい

Question

前提・実現したいこと

jQueryのtooltipを用いて吹き出し機能を作成したいと思っております。
吹き出しの中に、マウスカーソルを合わせた部分に関連したデータを表示させたいと思っているのですが思ったような実装をすることが出来ず悪戦苦闘しております。

例：カレンダー表の予定にカーソルを合わせると予定の内容が表示される。（gem'gon'を導入しjs内でも変数を使用可能としております。）

発生している問題・エラーメッセージ

カレンダー上に予定が２つあったとして、吹き出しは理想の動きをしておりますが、内容を新たに追加した時に２つとも同じ予定の内容となってしまいます。（内容は新しい方です。）

該当のソースコード

↓Eventscontroller

class EventsController < ApplicationController
  before_action :set_event, only: [:show, :edit, :update, :destroy]
  before_action :set_department, only: [:index, :create, :show]

  def index
    @departments = Department.all                             # 予定表の表記名用
    @events = Department.find(params[:department_id]).events  # 予定表に関連のある予定だけを抽出
    @comment = Comment.new
    @comments = @department.comments.includes(:user)          # 予定表に関連づいたコメントのみを取得
    gon.event = @events                                       #js用の変数
  end

  def new
    @events = current_user.events
  end

  def create
    @events = @department.events.new(event_params)            # 予定表に関連づいた予定のみを抽出
    if @events.save
      redirect_index
    else
      render :new
    end
  end

  def show
  end

  def edit
  end

  def update
    if @event.update(event_params)
       redirect_index
    else
      render :edit
    end
  end

  def destroy
    @event.destroy
    redirect_index
  end

  private

  def event_params
    params.require(:event).permit(:title, :content, :start_time, :id).merge(user_id: current_user.id,
                                                                       department_id: params[:department_id])
  end

  def set_event
    @event = Event.find(params[:id])
  end

  def set_department
    @department = Department.find(params[:department_id])
  end

  def redirect_index
    redirect_to department_events_path
  end
end

↓.js

const moment = require("moment");

$(window).on('load', function() {
    $.each(gon.event, function(index,value) {
      var time = new Date(value.start_time)
      var nowTime = moment(time).format()
      var tooltipHtml = `
      <div>
        <div class="tooltipClose">×</div>
          <div style="margin: 10px;">
            <div>
            予定：${value.title}<br>
              ${nowTime}<br>
            </div>
          </div>
        </div>
      </div>`;

        $(".showTooltip").tooltip({
            content: tooltipHtml
        }) 
    });
});

↓_main_event.html.erb(index.html.erbから呼び出している)該当されるコードは<%# カレンダー予定追加 %>内の記述

<div class="event-header">
  <div class=event-name>
    <%= @department.name %>
  </div>
  <div class="event-destroy">
    <%= link_to '予定表を削除する', department_path(@department.id), method: :delete, class:"button" %>
  </div>
</div>

<div class="event-main">
  <div class="plan-create">
    <%= link_to '予定を追加', new_department_event_path %>
  </div>
  <div class="calendar">
    <%# カレンダ表 %>
    <%= month_calendar events: @events do |date, events| %>
      <%= date.day %>
      <%# カレンダー予定追加 %>
      <% events.each do |event| %>
          <div class="event-display">
            <%=link_to event.title, department_event_path(@department,event), class:"event-title showTooltip",  title: "ツールチップ"%>
            <span><%= event.start_time.strftime("%H:%M")%></span>
          </div>
      <% end %>
      <%#/ カレンダー予定追加 %>
    <% end %>
    <%#/ カレンダー表 %>
  </div>

  <div class="comments">
    <%= render partial: 'comment', collection: @comments %>
  </div>
</div>

<%= form_with model: [@department, @comment], class: "form", local: true do |f| %>
  <div class="form-comment">
    <%= f.text_field :text, placeholder: "type a message", class: "form-input" %>
    <label class="form-image">
      <span class="image-file">画像</span>
      <%= f.file_field :image, class: "hidden" %>
    </label>
  </div>
  <%= f.submit '送信', class: "form-submit" %>
<% end %>

試したこと

js内に'mouseover'の記述を加え、「.index()」を用いて「カーソルを当てたのはその日の何番目の予定」を表し、eachと組み合わせ実装を試みておりましたが解決に至りませんでした。
自分のイメージと致しまして、「ビュー側でeachを用いてデータの数によってタイトルを展開しているように、それに合わせてjs内でもデータを展開して当てはめる」ことを実現出来ればと思っておりましたが思った様にいきませんでした。ご助力頂ければ幸いです。

Answer 1

$.each の中で

        $(".showTooltip").tooltip({
            content: tooltipHtml
        }) 

としているので、上書きされてしまってるように見えます。

クラス名にイベントの id を割り当てます。

<span class="showTooltip-<%= event.id %>">

js でも id の付いたクラスを指定します。

        $(".showTooltip-" + value.id).tooltip({
            content: tooltipHtml
        }) 

gon というのの中に id が入ってなかったら別の方法を考える必要があります。

Comments

[eita-eng]

無事実装することが叶いました...！！
idを一緒に付与する事によって関連付けは勿論、情報を保ったままイベント発火することが可能となるのですね！
とても助かりました！ありがとうございました！