3

小枝テンプレート内で 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']]たが、何も変更されていません。
スペースをハードスペースに変更しようとしましたが、効果がありませんでした。
さらに悪いことに、ツールチップは次のように表示されます:そのツールチップは非常に奇妙ですすべてのスペースと引用符またはアポストロフィを無視します。次のよう になります。修正方法を教えてください。:)これは非常に優れたツールチップです。

4

2 に答える 2

1

動的 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';
    }
}
于 2016-01-07T12:34:45.193 に答える
1

@Ilya Yarkovets のおかげで、私はその問題を解決する方法を見つけました。私がする必要があったのは、これを作成して $title を変更することだけです:

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

&thinsp は、テキストの折り返しのために   よりも優れていました。

于 2016-01-06T14:47:36.377 に答える