在产品属性下拉菜单woocommerce旁边添加工具提示说明

Question

我想在每个产品变体下拉列表中添加一个工具提示，并加一个简短的说明。这是我的构想的屏幕截图。

我考虑过使用CSS并添加伪元素：after，但是我无法使其可点击。另外，我看不到向每个下拉菜单添加内容的钩子。

Answer 1

我使用了woocommerce钩子（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;}