子比文章新增功能 – Hover 文字显示 Tooltip

演示截图

获取代码

[hidecontent type=”reply” desc=”隐藏内容：评论后查看”]

/**
 * Hover文字显示Tooltip（支持文字/图片）
 * 文字提示：[tooltip text="显示的文字" tip="提示内容" placement="top"]
 * 图片提示：[tooltip text="显示的文字" img="图片URL" placement="top"]
 * placement可选值：top, bottom, left, right
 */
function zib_hover_tooltip_shortcode($atts) {
    $atts = shortcode_atts(array(
        'text' => '',
        'tip' => '',
        'img' => '',
        'placement' => 'top',
        'width' => '200'
    ), $atts);
    
    if (!$atts['text']) return '';
    
    $placement = in_array($atts['placement'], array('top', 'bottom', 'left', 'right')) ? $atts['placement'] : 'top';
    
    // 图片提示
    if ($atts['img']) {
        $content = '<img src="' . esc_url($atts['img']) . '" style="max-width:' . intval($atts['width']) . 'px;height:auto;">';
        return '<span class="zib-tip" data-toggle="popover" data-trigger="hover" data-placement="' . $placement . '" data-html="true" data-content="' . esc_attr($content) . '">' . esc_html($atts['text']) . '</span>';
    }
    
    // 文字提示
    if ($atts['tip']) {
        return '<span class="zib-tip" data-toggle="tooltip" data-placement="' . $placement . '" title="' . esc_attr($atts['tip']) . '">' . esc_html($atts['text']) . '</span>';
    }
    
    return $atts['text'];
}
add_shortcode('tooltip', 'zib_hover_tooltip_shortcode');

function zib_tooltip_init() {
    echo '<style>.zib-tip{border-bottom:1px dashed;cursor:help}</style>';
    echo '<script>jQuery(function($){$("[data-toggle=tooltip]").tooltip();$("[data-toggle=popover]").popover({trigger:"hover",html:true,container:"body"})});</script>';
}
add_action('wp_head', 'zib_tooltip_init');
add_action('wp_footer', 'zib_tooltip_init');

[/hidecontent]