Question

我试图在枝条模板内显示一个更容易和更清洁的Bootstrap工具提示。我希望实现这样的目标：<i class="icon" {{'this is great tooltip'|tooltip}}></i> 我创建了树枝过滤器：

class TooltipExtension extends \Twig_Extension{

    public function getFilters()
    {
        return array(
            new \Twig_SimpleFilter('tooltip', array($this, 'tooltipFilter',['is_safe'=>['html']])),
            new \Twig_SimpleFilter('tooltip_top', array($this, 'tooltipTopFilter')),
            new \Twig_SimpleFilter('tooltip_bottom', array($this, 'tooltipBottomFilter')),
            new \Twig_SimpleFilter('tooltip_left', array($this, 'tooltipLeftFilter')),
            new \Twig_SimpleFilter('tooltip_right', array($this, 'tooltipRightFilter')),
        );
    }

    public function tooltipFilter($title, $direction = "top")
    {
        switch($direction){
            case "top":
                return $this->tooltipTopFilter($title);

            case "bottom":
                return $this->tooltipBottomFilter($title);

            case "left":
                return $this->tooltipLeftFilter($title);

            case "right":
                return $this->tooltipRightFilter($title);

        }
    }

    public function tooltipTopFilter($title)
    {
        return ' data-toggle=tooltip data-placement=top title="'.$title.'" ';
    }

    public function tooltipBottomFilter($title)
    {
        return ' data-toggle=tooltip data-placement=bottom title='.$title.' ';
    }

    public function tooltipLeftFilter($title)
    {
        return ' data-toggle=tooltip data-placement=left title='.$title.' ';
    }

    public function tooltipRightFilter($title)
    {
        return ' data-toggle=tooltip data-placement=right title='.$title.' ';
    }

    public function getName()
    {
        return 'tooltip_extension';
    }
}

它返回字符串就像我想要的那样。但是，在HTML代码中它看起来像这样：

<i data-original-title="&quot;this" class="icon" data-toggle="tooltip" data-placement="top" title="" is="" great="" tooltip&quot;=""></i>

正如您所看到的，我添加了['is_safe'=>['html']]，但它根本没有改变任何内容我试图将空间改为硬空间但没有效果更糟糕的是，工具提示显示如下：忽略所有空格和引号或撇号。它应该是这样的：
请帮我解决一下！：）

Answer 1

感谢@Ilya Yarkovets，我找到了解决这个问题的方法。我需要做的就是改变$ title：

$title = html_entity_decode(str_replace(' ', '&thinsp;', $title));
return ' data-toggle=tooltip data-placement=top title='.($title).' ';

由于文本换行，

＆amp; thinsp优于＆amp; nbsp。

Answer 2

感谢dynamic Twig filters，您可以按如下方式简化扩展程序的代码：

class TooltipExtension extends \Twig_Extension
{
    public function getFilters()
    {
        return array(
            new \Twig_SimpleFilter('tooltip', array($this, 'tooltip',['is_safe'=>['html']])),
            new \Twig_SimpleFilter('tooltip_*', array($this, 'positionedTooltip', ['is_safe'=>['html']])),
        );
    }

    public function tooltip($title)
    {    
        return $this->positionedTooltip('top', $title);
    }

    public function positionedTooltip($position, $title)
    {
        $validPositions = ['top', 'bottom', 'left', 'right'];
        if (!in_array($position, $validPositions)) {
            throw new \InvalidArgumentException(sprintf('The position of the tooltip can only be one of the following: %s', implode(', ', $validPositions)));
        }

        return sprintf(' data-toggle=tooltip data-placement=%s title="%s" ', $position, $title);
    }

    public function getName()
    {
        return 'tooltip_extension';
    }
}

Twig过滤器返回html标签内部

2 个答案: