如何在使用实体化时动态更新工具提示

时间:2016-02-28 11:10:36

标签: material-design materialize

我在我的应用脚本插件中使用materializecss,当我尝试动态添加工具提示时,提示不会使用新标签更新。我已经尝试了几种变化,甚至双重检查了尖端是否正在被改变。问题是它似乎没有重新初始化更新的文本。

这是一个jfiddle:https://jsfiddle.net/edlisten/grafo4su/1/

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

     <script>
         $(function() {
          $('.tooltipped').tooltip({delay: 50,tooltip:"new",position:"bottom"});
        });
        </script>
      </head>
      <body>

      <div class="container">
      <a class="btn tooltipped">Hover me!</a>
        </div>
      </body>
    </html>

1 个答案:

答案 0 :(得分:11)

您可以做的是为锚点设置一个id。 让我们说<a class="btn tooltipped" id="tooltip">Hover me!</a> 现在我们可以使用jquery轻松找到元素。

var anchorElement = $('#tooltip');

Materialise在元素上有一个属性data-tooltip,以便弹出工具提示。

anchorElement.attr('data-tooltip', 'New tooltip value');

最后我们需要初始化元素

上的materialize工具提示
anchorElement.tooltip();

你可以玩它并把它放在一个函数中。