7430


はじめまして。

私は、[Tooltipster](http://iamceege.github.io/tooltipster/) を使用してツールチップを表示させています。  
問題は、Tooltipster で生成する HTML 内に、外部 JavaScript
を使用して外部データベースよりデータ（テキスト）を表示させることができないことです。  
この外部 JavaScript は、通常の HTML 内であれば、正常に動いています。

ソースは以下です。  
spanタグ内に、idで紐付けられたデータを引っ張ってくる仕組みの外部 JavaScript です。

[code]

    <script>
        $(window).load(function(){
            $('.dammy').tooltipster({content: $('<div>dammytext<span id="******"></span><a href="xxx.html">more…</a></div>')});
        });
    </script>
    
[/code]

外部 JavaScript は、申し訳ございませんが公開できません…  
ですので、明快な解決は難しいかもですが、何かヒントだけでもいただければ…と思い投稿させていただきました。

どうぞよろしくお願いいたします。


CC BY-SA 3.0
2015-03-04T02:04:38.013
7403
2015-03-05T10:28:09.650
2015-03-04T02:22:51.530
7926
8665
question
javascript
Tooltipster で生成する HTML 内に、外部 JavaScript を使用してデータ（テキスト）を読み込ませたい


通常のHTMLの場合

  1. HTMLが処理される。 (既に実態がある)
  2. 外部JavaScriptがロードされて、(1)に作用する

提示されたサンプルの場合は

  1. HTMLが構成される。(まだ実態がない)
  2. 外部JavaScriptがロードされて、(1)に作用する
  3. tooltipsterで.dammy要素にcontentが定義付けられる。
  4. マウスオーバー時に、(3)で定義された要素が **動的に** 生成される (ここで実態化する)

となりますので(2)の時点で(3)の定義に作用させることができません。  
おそらくこれが問題になっているのだと推測できます。  
※ 動的生成が原因ならば。おそらくonload時のdocument.writeでも同様の現象が起こるはずです。

[code]

    <section style="display:none;">
      <div id="a1">dammytext<span id="******"></span><a href="xxx.html">more…</a></div>
    </section >
    
[/code]

としておいて

[code]

    $('.dammy').tooltipster({content: $('#a1')});
    
[/code]

みたいな感じでもいけるのですが。tooltipsterで用意されているfunctionInit、functionBefore、functionReady、functionAfterあたりの設定項目も検討してください。

追伸：  
content:
$('#a1')みたいな指定した場合。#a1要素がツールチップ初回時に、まるっと切り取られて、tooltipsterの内部データとして取り込まれる動作のようです。ご注意ください。


CC BY-SA 3.0
2015-03-04T08:28:24.297
7430
2015-03-04T08:28:24.297
8335
7403
answer