質問: はじめまして。 私は、Tooltipster を使用してツールチップを表示させています。 問題は、Tooltipster で生成する HTML 内に、外部 JavaScript を使用して外部データベースよりデータ(テキスト)を表示させることができないことです。 この外部 JavaScript は、通常の HTML 内であれば、正常に動いています。 ソースは以下です。 spanタグ内に、idで紐付けられたデータを引っ張ってくる仕組みの外部 JavaScript です。 ``` ``` 外部 JavaScript は、申し訳ございませんが公開できません... ですので、明快な解決は難しいかもですが、何かヒントだけでもいただければ...と思い投稿させていただきました。 どうぞよろしくお願いいたします。
回答: 通常のHTMLの場合 1. HTMLが処理される。 (既に実態がある) 2. 外部JavaScriptがロードされて、(1)に作用する 提示されたサンプルの場合は 1. HTMLが構成される。(まだ実態がない) 2. 外部JavaScriptがロードされて、(1)に作用する 3. tooltipsterで.dammy要素にcontentが定義付けられる。 4. マウスオーバー時に、(3)で定義された要素が**動的に**生成される (ここで実態化する) となりますので(2)の時点で(3)の定義に作用させることができません。 おそらくこれが問題になっているのだと推測できます。 ※ 動的生成が原因ならば。おそらくonload時のdocument.writeでも同様の現象が起こるはずです。 ``` dammytextmore... ``` としておいて ``` $('.dammy').tooltipster({content: $('#a1')}); ``` みたいな感じでもいけるのですが。tooltipsterで用意されているfunctionInit、functionBefore、functionReady、functionAfterあたりの設定項目も検討してください。 追伸: content: $('#a1')みたいな指定した場合。#a1要素がツールチップ初回時に、まるっと切り取られて、tooltipsterの内部データとして取り込まれる動作のようです。ご注意ください。