主页 / 问题 / 1586690
Accepted
Вася
Asked:2024-07-10 11:55:20 +0000 UTC2024-07-10 11:55:20 +0000 UTC

如何将带有 html 内容的工具提示添加到短代码中？

  • 772

有一个网站，我wordpress使用如下短代码添加工具提示：bootstrap

function tooltip_func( $atts ){

    $attributes = shortcode_atts(
        array(
           'text' => '',
           'toggle' => 'tooltip',
           'placement' => 'bottom',
           'html' => 'true'
        ), 
        $atts
    );

    $output = '';
    if ( !$attributes['text'])
        return $output; 

    $output .= '<span  data-bs-toggle="'.$attributes['toggle'].'" data-bs-html="'.$attributes['html'].'" data-bs-placement="'.$attributes['placement'].'" data-bs-title="'.html_entity_decode($attributes['text']).'"><i class="fa fa-lightbulb-o" aria-hidden="true"></i></span>';
    return $output;
}

add_shortcode( 'tooltip', 'tooltip_func' );

现在我需要在tooltipusing中添加一个链接html。正如您在下面看到的，bootstrap可以以纯粹的形式做到这一点。

代码 

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="Текст <a href='https://youtube.com'>Ссылка</a> текст">
  Tooltip with HTML
</button>

但是，如果我通过这样的短代码添加它

[tooltip text='Текст <a href="https://youtube.com">Ссылка</a> текст' icon='fa-info-circle']

然后我得到一个损坏的布局。我尝试转义引号并对内容进行编码，但没有帮助我如何正确解决这个问题？

php

1 个回答

  1. Best Answer

    有效的是交换短代码中的引号，即代替

    [tooltip text='Текст <a href="https://youtube.com">Ссылка</a> текст' icon='fa-info-circle']

    像这样：

    [tooltip text="Текст <a href='https://youtube.com'>Ссылка</a> текст" icon="fa-info-circle"]

    此外，我在编辑器中发现了一个错误（功能），即当从 html 视图切换到可视化编辑器时，引号会返回到原始引号。不明白为什么

    • 0

相关问题