php - 在产品属性下拉菜单 woocommerce 旁边添加工具提示描述

Question

我想为每个产品变体下拉列表添加一个工具提示，并附上简短的描述。这是我设想的屏幕截图。

我考虑过使用 CSS 并添加伪元素 :after，但我无法使其可点击。此外，我没有看到向每个下拉列表添加内容的 Hook 。

Answer 1

我使用了 woocommerce Hook (woocommerce_before_variations_form)、引导工具提示和 css 定位来将工具提示 btn 移动到我想要的位置。

Woocommerce 功能:

add_action( 'woocommerce_before_variations_form', 'krank_custom_action', 5 );

function krank_custom_action() {
  echo '<button class="krank-tooltip ttone" type="button" data- 
  toggle="tooltip" data-placement="top" title="Your text here">Your btn text</button>
  <button class="krank-tooltip tttwo" type="button" data-toggle="tooltip" data-placement="top" title="Your text here ">Your btn 
    text</button>';
}

CSS:

/* Tool tips */
button.krank-tooltip {border: none;color: #0157a3;}
button.krank-tooltip.ttone {position: relative;top: 73px;right: -273px;}
button.krank-tooltip.tttwo {position: relative;top: 114px;right: -161px;}