如何在循环中使用 Material Design “mdl-tooltip”

Posted

技术标签:

【中文标题】如何在循环中使用 Material Design “mdl-tooltip”【英文标题】:How to use Material Design "mdl-tooltip" in a loop 【发布时间】:2017-07-30 18:17:06 【问题描述】:

我正在使用 materialdesign 库的工具提示: https://getmdl.io/components/#tooltips-section

我想在循环中使用此功能,但这当然行不通,因为 mdl 正在使用“id's”(本例中为 tt4)来触发图标并显示其工具提示。

我怎样才能让它循环工作并将正确的工具提示链接到正确的图标?

非常感谢!

我的 php laravel 刀片代码:

                <td>
                @if ($note->text)
                    <div id="tt4" class="icon material-icons">info</div>
                    <div class="mdl-tooltip" for="tt4">
                        !! md($note->text) !!
                    </div>
                @endif

            </td>

【问题讨论】:

【参考方案1】:

您是否尝试过使用 PHP 回显动态注入代码。 PHP 是第一个运行的东西,所以它会为你评估所有其他的东西。

 echo "<div id="+$blah+">";

类似的东西

当你动态生成 MDL 时,你可能需要使用这个:

componentHandler.upgradeElements($('.mdl-tooltip').get());

【讨论】:

以上是关于如何在循环中使用 Material Design “mdl-tooltip”的主要内容,如果未能解决你的问题,请参考以下文章