bootstrapのtooltipsを複数表示

Question

こんにちは！

jQueryを用いてform要素のボタンをクリック時にtooltipを持つdiv要素を追加させるコードを書いています。
tooltipは常に表示させる状態にしているのですが、div要素を複数個追加した場合（例えばdiv1,div2,div3とします）div1のみtooltipが表示され、div2とdiv3にはtooltipが表示されず、div1が削除された場合にdiv2にのみtooltipが表示されてしまいます。

全ての追加したdiv要素に対して、常にtooltipを表示させるためにはどのようにすればよろしいでしょうか？
tooltipはbootstrapのものを利用しており、coffeescriptでコードを記述しています。以下は私の書いたコードです。（＊追記：回答者のユーザー様からcoffeescriptをjsに変更してほしいとの要望があり、jsに変換しています）

コードは以下です

   <div class="mmbox">
   <form>
    <input id="box" type="text" placeholder="名前を入力"><br>
     <p><a id="box" class="btn btn-primary btn-lg" role="button">投稿</a></p>
 </div>

  <div id="box">
 </div>

var positionOfNewBlock;

$(function() {
  return $("a#box").click(function(e) {
    var block, ref, value, x, y;
    value = $('input#box').val();
    ref = positionOfNewBlock(e), x = ref[0], y = ref[1];
    block = $("<div id ='tooltip' class='dot " + value + "' data-placement='bottom' data-toggle='tooltip' title= " + value + " style='left: " + x + "px; top: " + y + "px;' />").draggable({
      containment: "parent"
    }).css({
      position: "absolute"
    });

   $('div#box').append(block);
    return $('#tooltip').tooltip('show');
  });

});

positionOfNewBlock = function(e) {
  var canvas, x, y;
  canvas = $('div#box');
  x = 300;
  y = 100;
  return [x, y];
};

プログラミングに関して、ど素人の状態ですが、、、
どうぞよろしくお願いいたします。

Comments

[kei344]

HTMLを質問文に追記ください。また、コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。あと、coffeescriptより出力したjsを書いてもらったほうが答えやすいです。

[kensukesuke]

追記させていただきました。サイト初心者ですが、不十分な内容での質問をしてしまい、すみませんでした。よろしくお願いいたします。

Answer 1

これを修正することで直るかどうかは不明ですが、問題が1つあります。

return $('#tooltip').tooltip('show');

tooltipというidが指定されたタグ、というセレクタを使っていますが、本来id属性は同一HTML内で「ただ1つ」しか存在してはいけないルールになっています。現在あなたが追加するtooltip付きのタグは全て同じ「tooltip」というidが割り当てられています。なので、idの割り当てをするとき、なんらかの連番をつけるなどしてtooltip1、tooltip2などにすべきです。

まあ、そんなことしなくても、すでにtooltipsを実行したいjQueryオブジェクトはblockという名前で変数に入っているので、idを割り当てずに以下のコードでもshowできると思います。

return block.tooltip('show');

Comments

[kei344]

block の作成に $('input#box').val(); を使っているので、全て同じ文字列が追加されるようになりませんか？

[masaya_ohashi]

a#boxがクリックされた瞬間のinput#boxのvalなので、その時何をinputのフォームに入力していたかによりけりじゃないですかね？
あと言われて気付きましたけど、boxというidも被ってますね。