Javascript GWT/Twitter引导：GWT元素上的Popover？

我正试图在GWT的文本框上创建一个引导弹出框

<a href="#" class="btn danger" rel="popover" title="A title" data-content="some content...">hover for popover</a>

<script>
  $(function () {
    $("a[rel=popover]").popover({
              offset: 10
    });
  })
</script>

然后，在my.html的

中，上面提到的

部分（带有

$（“input[rel=popover]）…”

）

所需的.js文件通过

但是当我在文本框上悬停时，什么也没有发生

一些问题：

这是否仅限于

？还是我加载的脚本文件错误？ 甚至可以将

rel=…

和

data content=…

添加到GWT的文本框中吗？我需要jQuery/GQuery来处理那个脚本片段吗

编辑：

我尝试了Strelok的建议，但出现了以下错误：

java.lang.reflect.InvocationTargetException
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:597)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396)
at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200)
at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525)
at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
at java.lang.Thread.run(Thread.java:680)

Caused by: com.google.gwt.core.client.JavaScriptException: (ReferenceError): $ is not defined
at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
at de.eikecochu.awidb.client.Awidb.bindBootstrapPopover(Awidb.java)
at de.eikecochu.awidb.client.Awidb.onModuleLoad(Awidb.java:11)
... 9 more

---

我一直很想将Bootstrap与GWT集成在一起，但还没有尝试过。我的猜测是，如果您要包括

bootstrap twipsy.js

和

bootstrap popover.js

，那么您还需要在页面上包括jQuery

除此之外，在GWT中附加文本框后，您很可能需要调用

$（'xxx'）.popover（选项）

。因此，请尝试以下方法：

public void onModuleLoad() {
  final TextBox tb1 = new TextBox();
  DOM.setElementAttribute(tb1.getElement(), "rel", "popover");
  DOM.setElementAttribute(tb1.getElement(), "title", "A Title");
  DOM.setElementAttribute(tb1.getElement(), "data-content", "Popover content...");
  DOM.setElementAttribute(tb1.getElement(), "id", "test");
  tb1.addAttachHandler( new AttachEvent.Handler() {
    public void onAttach(AttachEvent e) {
      if (e.isAttached()) {
        bindBootstrapPopover(tb1.getElement().getId());
      }
    }
  });
  RootPanel.get().add(tb1);
}

native void bindBootstrapPopover(String id) /*-{
  $('#'+id).popover( {offset:10} );
}-*/;

---

我很想知道你是怎么做到的。

另外，看看GWT引导：）

它正在进行大量的开发，但是我们已经移植了很多小部件并正在工作

---

如果您愿意，可以看一看：

除了包装引导工具提示插件之外，我正尝试做与Eike相同的事情。斯特雷洛克的回答在这方面对我帮助很大，但有两件事我必须分别解决：

确保您正在使用的jQuery版本是copy 使用twitter引导插件。目前（2012年6月8日）这是> jQuery 1.7.1

如果$wnd.$（…）。。。不起作用请尝试$wnd.jQuery，并查看原因；） 具体地说，我得到了这个错误：

com.google.gwt.core.client.JavaScriptException: (TypeError): Property '$' of object [object Window] is not a function

---

页面中包含了jQuery，对吗？还可以尝试

$wnd.$（'#'+id）.popover（{offset:10}）。
com.google.gwt.core.client.JavaScriptException: (TypeError): Property '$' of object [object Window] is not a function