Home/ Questions/Q 6937587
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T12:22:59+00:00

I am trying to create a Bootstrap popover on a TextBox from GWT. <a

  • 0

I am trying to create a Bootstrap popover on a TextBox from 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>

like so:

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...");

and then, in the <head> of my .html the <script> part mentioned above (with $("input[rel=popover])...")).

The required .js-files are linked to the html file via <script src=...>

But nothing happens when i hover the TextBox.

Some questions:

Is this restricted to <a>? Or am I loading the script files wrong?
Is it even possible to add rel=... and data-content=... to a TextBox of GWT? Do I need jQuery/GQuery for that script snippet?

edit:

I tried what Strelok suggested and got the following error:

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
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve been curious of integrating Bootstrap with GWT myself, but have not tried it. My guess is that if you are including bootstrap-twipsy.js and bootstrap-popover.js you also need to include jQuery on your page.

    In addition to that you most likely need to call $('xxx').popover(options) after your text box is attached in GWT. So try something like this:

    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} );
}-*/;

    Would be curious to hear how you go with this.

    • 0