html 标签内的 Twig 过滤器 return

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

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

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

如您所见，我添加了 ['is_safe'=>['html']] 但它根本没有改变任何东西。
我试图将 space 更改为 hard-space 但没有效果。
更糟糕的是，工具提示显示如下： ignoring all spaces and quotation marks or apostrophes. It should looks like this:
请帮我解决一下！ :)

Answer 1

感谢@Ilya Yarkovets，我找到了解决该问题的方法。我需要做的就是通过以下方式更改 $title:

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

&thinsp 优于因为 text-wrapping。

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

html 标签内的 Twig 过滤器 return

Twig filter return inside html tag

twitter-bootstrap

symfony

twig

twitter-bootstrap-tooltip

twig-extension