有一个网站,我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']
然后我得到一个损坏的布局。我尝试转义引号并对内容进行编码,但没有帮助我如何正确解决这个问题?



