質問編集履歴
1
書式の改善
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Popoverの表示位置をマウスの座標
|
|
1
|
+
Popoverの表示位置をマウスの座標に応じて変更したい
|
body
CHANGED
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
ボタンをクリックした際、マウスの下にポップオーバーが開くようにしたいです。
|
|
4
|
+
|
|
5
|
+
Reactstrapを使用しています。
|
|
4
6
|
Bootstrapでの実装方法でも構いませんので、ご教授願いたいです。
|
|
5
7
|
|
|
6
|
-
###
|
|
8
|
+
### サンプルコード
|
|
7
9
|
|
|
10
|
+
```Javascript
|
|
8
11
|
import React, {Component} from 'react'
|
|
9
12
|
import {Container, Row, Popover, PopoverHeader, PopoverBody, Button} from 'reactstrap'
|
|
10
13
|
|
|
11
14
|
class Example extends Component{
|
|
12
|
-
|
|
15
|
+
constructor(props) {
|
|
13
16
|
super(props);
|
|
14
17
|
this.toggle = this.toggle.bind(this);
|
|
15
18
|
this.state = {
|
|
@@ -27,9 +30,7 @@
|
|
|
27
30
|
return(
|
|
28
31
|
<Container>
|
|
29
32
|
<Row className="mt-100">
|
|
30
|
-
<Button id="Popover1" onClick={this.toggle}>
|
|
33
|
+
<Button id="Popover1" onClick={this.toggle}>Launch Popover</Button> //クリックするとボタンの下にPopoverが出る
|
|
31
|
-
Launch Popover
|
|
32
|
-
</Button>
|
|
33
34
|
<Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
|
|
34
35
|
<PopoverHeader>Header</PopoverHeader>
|
|
35
36
|
<PopoverBody>Body</PopoverBody>
|
|
@@ -41,8 +42,10 @@
|
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
export default Example
|
|
45
|
+
```
|
|
44
46
|
|
|
45
47
|
|
|
48
|
+
|
|
46
49
|
### 補足情報（FW/ツールのバージョンなど）
|
|
47
50
|
|
|
48
51
|
"react": 16.3.2
|