質問編集履歴
1
HTMLのコードを追記し、coffeescriptをjavascriptに変換しコードを再掲しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
jQueryを用いてクリック時にtooltipを持つdiv要素を追加させるコードを書いています。
|
|
5
|
+
jQueryを用いてform要素のボタンをクリック時にtooltipを持つdiv要素を追加させるコードを書いています。
|
|
6
6
|
|
|
7
7
|
tooltipは常に表示させる状態にしているのですが、div要素を複数個追加した場合（例えばdiv1,div2,div3とします）div1のみtooltipが表示され、div2とdiv3にはtooltipが表示されず、div1が削除された場合にdiv2にのみtooltipが表示されてしまいます。
|
|
8
8
|
|
|
@@ -10,7 +10,39 @@
|
|
|
10
10
|
|
|
11
11
|
全ての追加したdiv要素に対して、常にtooltipを表示させるためにはどのようにすればよろしいでしょうか？
|
|
12
12
|
|
|
13
|
-
tooltipはbootstrapのものを利用しており、coffeescriptでコードを記述しています。以下は私の書いたコードです。
|
|
13
|
+
tooltipはbootstrapのものを利用しており、coffeescriptでコードを記述しています。以下は私の書いたコードです。（＊追記：回答者のユーザー様からcoffeescriptをjsに変更してほしいとの要望があり、jsに変換しています）
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
コードは以下です
|
|
20
|
+
|
|
21
|
+
```HTML
|
|
22
|
+
|
|
23
|
+
<div class="mmbox">
|
|
24
|
+
|
|
25
|
+
<form>
|
|
26
|
+
|
|
27
|
+
<input id="box" type="text" placeholder="名前を入力"><br>
|
|
28
|
+
|
|
29
|
+
<p><a id="box" class="btn btn-primary btn-lg" role="button">投稿</a></p>
|
|
30
|
+
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
<div id="box">
|
|
36
|
+
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
```javascript
|
|
14
46
|
|
|
15
47
|
|
|
16
48
|
|
|
@@ -20,36 +52,60 @@
|
|
|
20
52
|
|
|
21
53
|
|
|
22
54
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
$ ->
|
|
26
|
-
|
|
27
|
-
|
|
55
|
+
var positionOfNewBlock;
|
|
28
56
|
|
|
29
57
|
|
|
30
58
|
|
|
59
|
+
$(function() {
|
|
60
|
+
|
|
61
|
+
return $("a#box").click(function(e) {
|
|
62
|
+
|
|
63
|
+
var block, ref, value, x, y;
|
|
64
|
+
|
|
31
|
-
value = $('input#box').val()
|
|
65
|
+
value = $('input#box').val();
|
|
66
|
+
|
|
67
|
+
ref = positionOfNewBlock(e), x = ref[0], y = ref[1];
|
|
68
|
+
|
|
69
|
+
block = $("<div id ='tooltip' class='dot " + value + "' data-placement='bottom' data-toggle='tooltip' title= " + value + " style='left: " + x + "px; top: " + y + "px;' />").draggable({
|
|
70
|
+
|
|
71
|
+
containment: "parent"
|
|
72
|
+
|
|
73
|
+
}).css({
|
|
74
|
+
|
|
75
|
+
position: "absolute"
|
|
76
|
+
|
|
77
|
+
});
|
|
32
78
|
|
|
33
79
|
|
|
34
80
|
|
|
35
|
-
|
|
81
|
+
$('div#box').append(block);
|
|
36
82
|
|
|
37
|
-
|
|
83
|
+
return $('#tooltip').tooltip('show');
|
|
38
84
|
|
|
39
|
-
draggable({ containment: "parent" }).css({ position: "absolute" })
|
|
40
|
-
|
|
41
|
-
|
|
85
|
+
});
|
|
42
|
-
|
|
43
|
-
$('#tooltip').tooltip('show')
|
|
44
86
|
|
|
45
87
|
|
|
46
88
|
|
|
47
|
-
|
|
89
|
+
});
|
|
48
90
|
|
|
49
|
-
canvas = $('div#box')
|
|
50
91
|
|
|
51
|
-
x = 300
|
|
52
92
|
|
|
53
|
-
|
|
93
|
+
positionOfNewBlock = function(e) {
|
|
54
94
|
|
|
95
|
+
var canvas, x, y;
|
|
96
|
+
|
|
97
|
+
canvas = $('div#box');
|
|
98
|
+
|
|
99
|
+
x = 300;
|
|
100
|
+
|
|
101
|
+
y = 100;
|
|
102
|
+
|
|
55
|
-
[x, y]
|
|
103
|
+
return [x, y];
|
|
104
|
+
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
プログラミングに関して、ど素人の状態ですが、、、
|
|
110
|
+
|
|
111
|
+
どうぞよろしくお願いいたします。
|