WooCommerce 中的运输方式工具提示

我需要在统一费率交付选项旁边放置一个工具提示，一个问号图标，以便单击时会弹出一个窗口，其中包含交付条件的描述。

我有一些代码显示一个图标（现在将其替换为文本“我的图标”），单击时会弹出一个窗口。

function action_woocommerce_after_shipping_rate( $method, $index ) {
    
    // Compare (adjust as needed)
    if( $method->get_id() == 'flat_rate:1' ) {
        echo '<span class="popup" onclick="myFunction()">My Icon<span class="popuptext" id="myPopup">';
        echo dynamic_sidebar( 'tooltip_sidebar' );          
        echo '</span></span>';
    }
}
add_action( 'woocommerce_after_shipping_rate', 'action_woocommerce_after_shipping_rate', 10, 2 ); 

弹出脚本：

<script>
// When the user clicks on <div>, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>

弹出窗口的样式：

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 320px;
    background: #fff;
    color: #222;
    text-align: center; 
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    -webkit-box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.3);
    box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.3);
}

/* Popup arrow */
.popup .popuptext::after {
    content: "X";
    position: absolute;
    top: 0;
    right: 5%;
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

我还为侧边栏注册了一个新区域，其中显示了交货条件：

add_action( 'widgets_init', 'register_new_sidebar' );
function register_new_sidebar() {

    register_sidebar(
        array(
            'id' => 'tooltip_sidebar',
            'name' => 'Условия доставки',
            'description' => 'Добавьте ваши условия доставки',
            'before_widget' => '<div>',
            'after_widget' => '</div>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>'
        )
    );
}

但是这里出现了一个问题。在带有交货条款的文本下，会出现一个数字1，尽管它根本不在文本中。最有可能的是，这由侧边栏本身的 id 或侧边栏列的编号显示。

显然我错误地添加了侧边栏输出echo dynamic_sidebar ('tooltip_sidebar');。也许您需要为此侧边栏的输出添加条件？

虽然这还不是全部。在结帐页面上，弹出窗口显示交货条件的文本和数量1。但是在购物篮页面上，只显示一个数字，没有交货条件的文字。但是从钩子来看，两个页面上的文本应该显示相同。

请告诉我如何解决这个问题？