Добавить описание всплывающей подсказки рядом с раскрывающимся меню атрибута продукта woocommerce

Question

Я хотел бы добавить всплывающую подсказку к каждому раскрывающемуся варианту продукта с небольшим описанием. Вот скриншот того, что я представляю.

Я думал об использовании CSS и добавлении псевдоэлемента: after, но не могу сделать его кликабельным. Также я не вижу хука для добавления контента в каждый выпадающий список.

Answer 1

Я использовал хук woocommerce (woocommerce_before_variations_form), подсказку начальной загрузки и позиционирование css, чтобы переместить подсказку в нужное место.

Функция 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;}