tip 空间

components/dkbase/dk-tip/dk-tip.js

@@ -52,6 +52,7 @@ Component({
      * @date   : 2024/4/25 11:46
      */
     showTip(e) {
+      this.triggerEvent('clickTip', {    })
       this.setData({
         showTip: true
       })

components/dkbase/dk-tip/dk-tip.wxml

@@ -1,13 +1,23 @@
- 
-<view class="container"> 
-  <van-icon  name="question-o"  catchtap="showTip" /> 
-</view>
-<!-- 下右弹框 -->
-<view wx:if="{{showTip&&Down&&Right}}" class="tipDownRight" catchtap="clickTip">
-  <text > {{tipContent}}</text>
-</view>
-<!-- 下左弹框 -->
-<view wx:if="{{showTip&&Down&&Left}}" class="tipDownLeft" catchtap="clickTip">
-  <text > {{tipContent}}</text>
-</view>
- 
+<!-- 显示 tip 文字 -->
+<view class="tipLayout">
+  <!-- 上右弹框 -->
+  <view wx:if="{{showTip && Up && Right}}" class="tipUpRight" >
+    <text>{{tipContent}}</text>
+  </view>
+  <!-- 上左弹框 -->
+  <view wx:if="{{showTip && Up && Left}}" class="tipUpLeft" >
+    <text>{{tipContent}}</text>
+  </view>
+  <!-- 带问号的小圆圈 -->
+  <view class="container">
+    <van-icon name="question-o" size="30rpx" catchtap="showTip" /> <!-- 添加size属性以控制图标大小（可选） -->
+  </view>
+  <!-- 下右弹框 -->
+  <view wx:if="{{showTip&&Down&&Right}}" class="tipDownRight" >
+    <text> {{tipContent}}</text>
+  </view>
+  <!-- 下左弹框 -->
+  <view wx:if="{{showTip&&Down&&Left}}" class="tipDownLeft" >
+    <text> {{tipContent}}</text>
+  </view>
+</view>

components/dkbase/dk-tip/dk-tip.wxss

@@ -1,4 +1,4 @@
-.tipDownRight { 
+.tipDownRight {
   min-height: 80rpx;
   color: white;
   display: flex;
@@ -7,23 +7,30 @@
   padding: 8rpx 16rpx;
   background: rgba(0, 0, 0, 0.7);
   position: absolute; 
-  border-radius: 12rpx;   
+  /* 使用百分比或负值rpx，确保它完全在图标上方 */
+  transform: translateY(70%);
+  /* 另一个选项，使用transform以确保更精确的控制 */
+  left: 0;
+  /* 如果需要，可以调整或移除 */
+  border-radius: 12rpx;
+  width: max-content;
 }
 
 .tipDownRight:after {
-  content:"\00a0";
-  width:0;
-  height:0;
-  display:block;
-  border-style:solid;
+  content: "\00a0";
+  width: 0;
+  height: 0;
+  display: block;
+  border-style: solid;
   border-width: 8rpx;
-  border-color:transparent transparent rgba(0, 0, 0, 0.7) transparent;
-  position:absolute;
+  border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
+  position: absolute;
   z-index: 1;
   top: -14rpx;
   left: 10rpx;
-} 
-.tipDownLeft { 
+}
+
+.tipDownLeft {
   min-height: 80rpx;
   color: white;
   display: flex;
@@ -32,25 +39,107 @@
   padding: 8rpx 16rpx;
   background: rgba(0, 0, 0, 0.7);
   position: absolute; 
-  border-radius: 12rpx;   
+  /* 使用百分比或负值rpx，确保它完全在图标上方 */
+  transform: translateY(70%);
+  /* 另一个选项，使用transform以确保更精确的控制 */
+  right: 0;
+  /* 如果需要，可以调整或移除 */
+  border-radius: 12rpx;
+  width: max-content;
 }
 
 .tipDownLeft:after {
-  content:"\00a0";
-  width:0;
-  height:0;
-  display:block;
-  border-style:solid;
+  content: "\00a0";
+  width: 0;
+  height: 0;
+  display: block;
+  border-style: solid;
   border-width: 8rpx;
-  border-color:transparent transparent rgba(0, 0, 0, 0.7) transparent;
-  position:absolute;
+  border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
+  position: absolute;
   z-index: 1;
   top: -14rpx;
+  right: 10rpx;
+}
+
+.tipUpRight {
+  min-height: 80rpx;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 8rpx 16rpx;
+  background: rgba(0, 0, 0, 0.7);
+  position: absolute;
+  top: -50%;
+  /* 使用百分比或负值rpx，确保它完全在图标上方 */
+  transform: translateY(-100%);
+  /* 另一个选项，使用transform以确保更精确的控制 */
+  left: 0;
+  /* 如果需要，可以调整或移除 */
+  border-radius: 12rpx;
+  width: max-content;
+}
+
+.tipUpRight:after {
+  content: "\00a0";
+  width: 0;
+  height: 0;
+  display: block;
+  border-style: solid;
+  border-width: 8rpx;
+  border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent; 
+  position: absolute;
+  z-index: 1;
+  bottom: -14rpx;
   left: 10rpx;
-} 
-.container {  
-  display: flex;  
-  flex-direction: column; /* 设置为列方向，这样子元素会垂直排列 */  
-  align-items: center; /* 在交叉轴（这里是水平轴）上居中对齐 */  
-  justify-content: center; /* 在主轴（这里是垂直轴）上居中对齐 */   
-} 
+}
+
+.tipUpLeft {
+  min-height: 80rpx;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 8rpx 16rpx;
+  background: rgba(0, 0, 0, 0.7);
+  position: absolute;
+  top: -50%;
+  /* 使用百分比或负值rpx，确保它完全在图标上方 */
+  transform: translateY(-100%);
+  /* 另一个选项，使用transform以确保更精确的控制 */
+  right: 0;
+  /* 如果需要，可以调整或移除 */
+  border-radius: 12rpx;
+  width: max-content;
+}
+
+.tipUpLeft:after {
+  content: "\00a0";
+  width: 0;
+  height: 0;
+  display: block;
+  border-style: solid;
+  border-width: 8rpx;
+  border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent; 
+  position: absolute;
+  z-index: 1;
+  bottom: -14rpx;
+  right: 10rpx;  
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tipLayout {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  /* 或其他适当的高度 */
+}