微信小程序开发--点击圆圈小问号弹注解tip 点击其他区域关闭（组件 w-tip 弹框在小圆圈的 上下左右 可以自己控制 ）

引言

在微信小程序开发中，实现用户交互的多样性是提升用户体验的关键之一。本文将详细介绍如何在微信小程序中实现点击圆圈小问号弹出注解（Tip）的功能。这种功能常见于帮助信息、提示说明等场景，能够为用户提供即时的帮助和反馈。

功能实现步骤

1. 界面效果图

2. 如何实现

先说思路 再谈实现 

主要思路 是在最外层view添加点击事件,用来关闭提示框，点击小圆圈问号 在组件执行显示消息框 并在执行前抛出一个方法 关闭其他的w-tip组件（可能有多个tip组件 效果就是 点击其中一个 关闭其他已经点开的） 主要用到事件冒泡和事件捕获（按钮）控件呢 就是以小圆圈为中心 弹消息框 主要是样式

我把他封成微信小程序组件了  下面是使用方法

使用控件的地方

wxml

<view bindtap="handleTap"> 
       <view>
          <text > 订单（{{item.orderQuantity}}单）</text>
          <dk-tip id="dk-tip1" Down="{{true}}" Right="{{true}}"
               tipContent='数据来源：销售订单'
              bind:clickTip="handleTap"></dk-tip>
       </view>

 </view>

js 

  /**
   * @desc : 关闭所有的tip
   * @date : 
   * @author : 
   */
    handleTap(){
      this.selectComponent('#dk-tip1').setShowTipFlag(false)
      this.selectComponent('#dk-tip2').setShowTipFlag(false)
      this.selectComponent('#dk-tip3').setShowTipFlag(false)
      this.selectComponent('#dk-tip4').setShowTipFlag(false)
    },
    

handleTap 就是全局 监听  关闭 所有tip组件

组件代码(就是以小圆圈为中心 弹消息框 主要是样式)

wxml:

<!-- 显示 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>

js

 
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    showTip: { //是否显示tip
      type: Boolean,
      value: false
    },
    Up: { //显示的方位 上
      type: Boolean,
      value: false
    },
    Down: { //显示的方位 下
      type: Boolean,
      value: false
    },
    Left: { //显示的方位 左
      type: Boolean,
      value: false
    },
    Right: { //显示的方位 右
      type: Boolean,
      value: false
    },
    showTip: { //是否显示tip
      type: Boolean,
      value: false
    },
    tipContent: { //tip显示的内容
      type: String,
      value: ""
    },
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * @desc   : 显示tip
     * @author : 
     * @date   : 2024/4/25 11:46
     */
    showTip(e) {
      this.triggerEvent('clickTip', {    })
      this.setData({
        showTip: true
      })
    },
    setShowTipFlag(flag) {
      this.setData({
        showTip: flag
      })
    },
  }
})

css:

.tipDownRight {
  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; 
  /* 使用百分比或负值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;
  border-width: 8rpx;
  border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
  position: absolute;
  z-index: 1;
  top: -14rpx;
  left: 10rpx;
}

.tipDownLeft {
  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; 
  /* 使用百分比或负值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;
  border-width: 8rpx;
  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;
}

.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%;
  /* 或其他适当的高度 */
}