オブジェクトの属性変更が画面に反映されない。(オブジェクトのリフレッシュ）

Question

当方の解決していない質問の中の、フロントにフォーカスした質問です。
情報が足りないようでしたらController,Model等もコード追加します。
部屋番号というタブがありまして、タブをクリックするごとに部屋に入っているオブジェクトの属性(内容）を切り替え、マウスオーバーでツールチップ表示したい。という仕様です。

タブクリックするごとにオブジェクトの情報が書き換わることはデベロッパーツールにて確認済みだが、画面に反映されない。
reloadは初期の値に戻ってしまうので意味がない。reloadの使い方に問題アリ？
オブジェクトをリフレッシュして属性を更新する的機能はありませんか？
ちなみにTipperというjQueryプラグインを使ってツールチップ表示を表現しております。
コード最後のtipper()にてマウスオーバーでデータが表示されます。
以下コード内情報

・Number...部屋番号
・List1...部屋番号1に対応するデータをまとめたものをモデルより呼び出し
・#gP...名前が入っているオブジェクト#gP01~#gP24（これを更新したい）
・.P...#gP01~#gP24に付与しているクラス（ツールチップ表示に使用）
・data-title属性を書き換えています。

(c# asp.net Index.cshtml)
  if (Number == 1)
                {
                    var List1 = {};
                  @for (int i = 0; i < Model.List1.Count(); i++)
                   {
                    @:List1[@i] = '@Model.List1[i]';
                   }
                    for (var index in List1)
                    {
                        var num = Number(index) + 1;
                        var id = "#gP" + (('00' + (num)).slice(-2))
                        $(id).attr('data-title', (List1[index]));
                    }
                    $('.P')
                }

このブロックがif(Number==5)まであります。
オブジェクトをリフレッシュする方法があれば、ご教授いただければ幸いです。

今回、オブジェクトをSVGファイルで管理していまして、htmlにつきましてはそのファイルを読み込むという形をとっています。ですので該当オブジェクトに関するSVGファイルの内容をご提示します。
初期表示時に上記コードを入れていますので初期表示時はgタブにdata-titleが入っています。

 <g
                 class="P"
                 //クラス
                 id="gP4"
                 //ID
                 transform="translate(-0.5291751,-3.4683591e-6)">
                <rect
                   style="display:inline;fill:#b3b3b3;fill-opacity:1;stroke:#000000;stroke-width:0.07969642;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                   id="P4_rect"
                   width="7.55512"
                   height="18.46151"
                   x="84.945335"
                   y="174.39366" />
                <text
                   xml:space="preserve"
                   style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.60198593px;line-height:1.25;font-family:'MS Gothic';-inkscape-font-specification:'MS Gothic, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26413709"
                   x="87.434586"
                   y="185.37314"
                   id="P4_text"
                   transform="scale(1.0001351,0.99986491)"><tspan
                     id="tspan1324-3-6-4-7-0-7"
                     x="87.434586"
                     y="185.37314"
                     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.60198593px;font-family:'MS Gothic';-inkscape-font-specification:'MS Gothic, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26413709">4</tspan></text>
              </g>

追記*****************************************************************
プラグインをdarktooltipというものに変更したところ切り替わることを確認できました。
しかし、切り替える前のツールチップが現データ表示のツールチップの後ろに出てしまうという事象が発生しています。イメージ画像追加。
メモリのことを考えると現時点のツールチップ以外は出したくないので、切り替える以前のツールチップのオブジェクトを破棄するのになにか良い方法はありますでしょうか。
私にはスキル不足で出来ませんが、プラグインを少しイジれば古いオブジェクトは消せるよー、っていう場合はご教授願います。
以下、プラグインのURLです。
リンク内容

Comments

[m.ts10806]

ＨＴＭＬもご提示ください

[sanezane]

内容編集いたしました。今回、オブジェクトをSVGファイルで管理していまして、htmlにつきましてはそのファイルを読み込むという形をとっています。ですので該当オブジェクトに関するSVGファイルの内容をご提示します。 初期表示時に上記コードを入れていますので初期表示時はgタブにdata-titleが入っています

[m.ts10806]

ああ・そうか・・C#でしたね。タグに追加しておいてください。

[m.ts10806]

SVGもですね。　https://teratail.com/tags/SVG

[sanezane]

承知しました。

[m.ts10806]

JavaScriptなら私も可能かなと思って質問内容見てみたらちょっと事情が違ったようなので、分かりそうな人が見てもらえるように修正してもらいました。お力になれずすみません。

[sanezane]

いえいえ。ありがとうございます。c#といれると見てももらえないかと思ってあえて外してました。笑