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

.tipDownRight {
  min-height: 60rpx;
  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;
  z-index: 99;
}

.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: 60rpx;
  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;
  z-index: 99;
}

.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;
}
.tipContentStyle{ 
  color:var(--color--); 
  font-size:var(--fontSize--);
}
.tipUpRight {
  min-height: 60rpx;
  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;
  z-index: 99;
}

.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: 60rpx;
  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;
  z-index: 99;
}

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