twitter-bootstrap - Twig过滤器在html标签内返回

Question

我正在尝试在 twig 模板中更轻松、更清晰地显示 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(' ', ' ', $title));
return ' data-toggle=tooltip data-placement=top title='.($title).' ';

&thinsp 比   更好，因为它有文本换行。

Answer 2

借助动态 Twig 过滤器，您可以简化扩展程序的代码，如下所示：

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';
    }
}