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

【问题标题】：Add tool tip description next to product attribute dropdown menu woocommerce在产品属性下拉菜单 woocommerce 旁边添加工具提示描述
【发布时间】：2018-09-28 13:54:33
【问题描述】：

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

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

【问题讨论】：

标签： php css wordpress woocommerce

【解决方案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;}

【讨论】：