fix 弹出位置错误问题。更新示例

doggyegg · Mar 1, 2024 · df866c0 · df866c0
1 parent 8974c59
commit df866c0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 14 deletions.
diff --git a/pages/vue/tooltip/tooltip.vue b/pages/vue/tooltip/tooltip.vue
@@ -2,23 +2,38 @@
 	<view class="container">
 		<uni-card is-full :is-shadow="false">
 			<text class="uni-h6">常用于展示鼠标 hover 时的提示信息，注意：无法覆盖原生组件</text>
+
 		</uni-card>
 		<uni-section title="基础用法" type="line" padding>
-			<uni-tooltip content="提示文字">
-				<button size="mini">左下</button>
-			</uni-tooltip>
+			<view class="content">
+				<uni-tooltip class="tooltip" content="提示文字" placement="left">
+					<button size="mini" type="primary" plain>左</button>
+				</uni-tooltip>
+				<uni-tooltip class="tooltip" content="提示文字" placement="bottom">
+					<button size="mini" type="primary" plain>底</button>
+				</uni-tooltip>
+				<uni-tooltip class="tooltip" content="提示文字" placement="top">
+					<button size="mini" type="primary" plain>上</button>
+				</uni-tooltip>
+				<uni-tooltip class="tooltip" content="提示文字" placement="right">
+					<button size="mini" type="primary" plain>右</button>
+				</uni-tooltip>
+			</view>
+
 		</uni-section>
 
 		<uni-section title="弹出层插槽" type="line" padding>
-			<uni-tooltip>
-				<button size="mini">多行文字提示</button>
-				<template v-slot:content>
-					<view class="uni-stat-tooltip">
-						一段文字一段文字一段文字一段文字一段文字一段文字一段文字
-						一段文字一段文字一段文字一段文字一段文字一段文字一段文字
-					</view>
-				</template>
-			</uni-tooltip>
+			<view class="content">
+				<uni-tooltip class="tooltip" placement="bottom">
+					<button size="mini" type="primary" plain>多行文字提示</button>
+					<template v-slot:content>
+						<view class="uni-stat-tooltip">
+							一段文字一段文字一段文字一段文字一段文字一段文字一段文字
+							一段文字一段文字一段文字一段文字一段文字一段文字一段文字
+						</view>
+					</template>
+				</uni-tooltip>
+			</view>
 		</uni-section>
 	</view>
 </template>
@@ -38,4 +53,14 @@
 	.uni-stat-tooltip {
 		width: 160px;
 	}
+
+	.tooltip {
+		margin: 10px;
+	}
+
+	.content {
+		display: flex;
+		justify-content: center;
+
+	}
 </style>
diff --git a/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue b/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue
@@ -84,7 +84,8 @@
 <style>
 	.uni-tooltip {
 		position: relative;
-		cursor: pointer;
+		cursor: pointer;
+		display: inline-block;
 	}
 
 	.uni-tooltip-popup {
@@ -105,4 +106,4 @@
 	.uni-tooltip:hover .uni-tooltip-popup {
 		display: block;
 	}
-</style>
+</style>