|
2 | 2 | <view class="container">
|
3 | 3 | <uni-card is-full :is-shadow="false">
|
4 | 4 | <text class="uni-h6">常用于展示鼠标 hover 时的提示信息,注意:无法覆盖原生组件</text>
|
| 5 | + |
5 | 6 | </uni-card>
|
6 | 7 | <uni-section title="基础用法" type="line" padding>
|
7 |
| - <uni-tooltip content="提示文字"> |
8 |
| - <button size="mini">左下</button> |
9 |
| - </uni-tooltip> |
| 8 | + <view class="content"> |
| 9 | + <uni-tooltip class="tooltip" content="提示文字" placement="left"> |
| 10 | + <button size="mini" type="primary" plain>左</button> |
| 11 | + </uni-tooltip> |
| 12 | + <uni-tooltip class="tooltip" content="提示文字" placement="bottom"> |
| 13 | + <button size="mini" type="primary" plain>底</button> |
| 14 | + </uni-tooltip> |
| 15 | + <uni-tooltip class="tooltip" content="提示文字" placement="top"> |
| 16 | + <button size="mini" type="primary" plain>上</button> |
| 17 | + </uni-tooltip> |
| 18 | + <uni-tooltip class="tooltip" content="提示文字" placement="right"> |
| 19 | + <button size="mini" type="primary" plain>右</button> |
| 20 | + </uni-tooltip> |
| 21 | + </view> |
| 22 | + |
10 | 23 | </uni-section>
|
11 | 24 |
|
12 | 25 | <uni-section title="弹出层插槽" type="line" padding>
|
13 |
| - <uni-tooltip> |
14 |
| - <button size="mini">多行文字提示</button> |
15 |
| - <template v-slot:content> |
16 |
| - <view class="uni-stat-tooltip"> |
17 |
| - 一段文字一段文字一段文字一段文字一段文字一段文字一段文字 |
18 |
| - 一段文字一段文字一段文字一段文字一段文字一段文字一段文字 |
19 |
| - </view> |
20 |
| - </template> |
21 |
| - </uni-tooltip> |
| 26 | + <view class="content"> |
| 27 | + <uni-tooltip class="tooltip" placement="bottom"> |
| 28 | + <button size="mini" type="primary" plain>多行文字提示</button> |
| 29 | + <template v-slot:content> |
| 30 | + <view class="uni-stat-tooltip"> |
| 31 | + 一段文字一段文字一段文字一段文字一段文字一段文字一段文字 |
| 32 | + 一段文字一段文字一段文字一段文字一段文字一段文字一段文字 |
| 33 | + </view> |
| 34 | + </template> |
| 35 | + </uni-tooltip> |
| 36 | + </view> |
22 | 37 | </uni-section>
|
23 | 38 | </view>
|
24 | 39 | </template>
|
|
38 | 53 | .uni-stat-tooltip {
|
39 | 54 | width: 160px;
|
40 | 55 | }
|
| 56 | +
|
| 57 | + .tooltip { |
| 58 | + margin: 10px; |
| 59 | + } |
| 60 | +
|
| 61 | + .content { |
| 62 | + display: flex; |
| 63 | + justify-content: center; |
| 64 | +
|
| 65 | + } |
41 | 66 | </style>
|
0 commit comments