質問編集履歴
1
書式の改善
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
Popoverの表示位置をマウスの座標
|
1
|
+
Popoverの表示位置をマウスの座標に応じて変更したい
|
test
CHANGED
@@ -2,15 +2,21 @@
|
|
2
2
|
|
3
3
|
|
4
4
|
|
5
|
-
|
5
|
+
ボタンをクリックした際、マウスの下にポップオーバーが開くようにしたいです。
|
6
|
+
|
7
|
+
|
8
|
+
|
9
|
+
Reactstrapを使用しています。
|
6
10
|
|
7
11
|
Bootstrapでの実装方法でも構いませんので、ご教授願いたいです。
|
8
12
|
|
9
13
|
|
10
14
|
|
11
|
-
###
|
15
|
+
### サンプルコード
|
12
16
|
|
13
17
|
|
18
|
+
|
19
|
+
```Javascript
|
14
20
|
|
15
21
|
import React, {Component} from 'react'
|
16
22
|
|
@@ -20,7 +26,7 @@
|
|
20
26
|
|
21
27
|
class Example extends Component{
|
22
28
|
|
23
|
-
|
29
|
+
constructor(props) {
|
24
30
|
|
25
31
|
super(props);
|
26
32
|
|
@@ -56,11 +62,7 @@
|
|
56
62
|
|
57
63
|
<Row className="mt-100">
|
58
64
|
|
59
|
-
<Button id="Popover1" onClick={this.toggle}>
|
65
|
+
<Button id="Popover1" onClick={this.toggle}>Launch Popover</Button> //クリックするとボタンの下にPopoverが出る
|
60
|
-
|
61
|
-
Launch Popover
|
62
|
-
|
63
|
-
</Button>
|
64
66
|
|
65
67
|
<Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
|
66
68
|
|
@@ -84,6 +86,10 @@
|
|
84
86
|
|
85
87
|
export default Example
|
86
88
|
|
89
|
+
```
|
90
|
+
|
91
|
+
|
92
|
+
|
87
93
|
|
88
94
|
|
89
95
|
|