Select Input gizmo with info popup?

[mlandsfeld]

I am using the Select Input gizmo to allow users to chose various forecast outputs and we would like to have a mouseover event display a few words about what that type of forecast it is. Is this possible with the Select Input gizmo? It looks like it may be possible with the attribute option. From the documentation I see this:

A dictionary representing additional HTML attributes to add to the primary element (e.g. {"onclick": "run_me();"}).

I assume that the run_me() is a javascript function? Are there any working examples of this feature? It would be idle to place a small info button on each line of the dropdown but i am not sure if this is possible.
Thanks!

[ezrajrice]

It seems like you are looking for a tooltip functionality correct? Which version of Tethys are you using?

I just looked at the example app in a Tethys v4 environment and it has the following code:

    save_button = Button(
        display_text='',
        name='save-button',
        icon='save',
        style='success',
        attributes={
            'data-bs-toggle':'tooltip',
            'data-bs-placement':'top',
            'title':'Save'
        }
    )

The result on hover effect is shown in this image.

Notice that the text shown is defined in the title attribute.
Further information on what attributes you can use can be found here. Just double check for the version of Bootstrap you have installed.

[mlandsfeld]

I am using Tethys 3.3.0 and we were trying to get different tooltip-like popups for each item in a Select Input gizmo dropdown list. We were thinking that the user would click on the Select Input item and when the dropdown list opens, they could mouse down the list and get a different tooltip-like information box for each of the items in the list.

[ezrajrice]

I don't think there's a dropdown gizmo so you'll need to implement this in the html. Using the Bootstrap 5 attribute syntax, you can use

  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown Menu
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#" data-bs-toggle="tooltip" data-bs-target="top" title="Option 1">First Option</a></li>
      <li><a class="dropdown-item" href="#" data-bs-toggle="tooltip" data-bs-target="top" title="Option 2">Second Option</a></li>
      <li><a class="dropdown-item" href="#" data-bs-toggle="tooltip" data-bs-target="top" title="Option 3">Third Option</a></li>
    </ul>
  </div>

If it isn't working for you then you may have a different version of Bootstrap. I don't remember which version they changed their data attribute naming convention.

[swainn]

I'll clarify that you want to use Boostrap 3 for Tethys 3 and Boostrap 4 for Tethys 4.

[ezrajrice]

Sorry, I didn't read clearly that you were trying to use a Select Input gizmo. The attributes on the gizmo apply only to the primary or parent element for the Tethys gizmos. This means that you can add a tooltip to the main element but not the individual options. I played around with trying to add a tooltip to the options, but it's more of a headache than it's probably worth. I'd recommend using the button example shown above combined with an input so that when the user selects the button, it automatically fills in the Input value for the form.

It would look something like

  <div class="input-group mb-3">
    <input type="text" class="form-control" aria-label="Text input with dropdown button">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown Menu
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#" data-bs-toggle="tooltip" data-bs-target="top" title="Option 1">First Option</a></li>
      <li><a class="dropdown-item" href="#" data-bs-toggle="tooltip" data-bs-target="top" title="Option 2">Second Option</a></li>
      <li><a class="dropdown-item" href="#" data-bs-toggle="tooltip" data-bs-target="top" title="Option 3">Third Option</a></li>
    </ul>
  </div>

Then you'll need to add the onclick listeners in your javascript to set the input's value.