How to show a tooltip on custom picker items.

My use case is after I search for a text, when I mouseover on the results even before selecting the item, it should display relevant information about the item.

  Discussion posts and replies are publicly visible

Parents
  • It is not possible to show tooltip when hovering on suggestions. You can use selectedTooltip parameter to pass any information which will be displayed on hovering over selected items.

    Or you can pass different arrays in suggestFunction and selectedLabels which will show different label for suggestions and different for selected items

       

  • Thanks Sanchit. Can you please share sample code for the second suggestion.                                                        

  • 0
    Certified Senior Developer
    in reply to lalithap7428

    You will get the code in the custom picker documentation

    link: Configure an Array Picker that Ignores Duplicates

    Just update the main interface by adding a new local like this:

    a!localVariables(
      local!pickedStates,
      local!stateLabelsWithDesc: {
        "Alabama (southeastern U.S. state that’s home to significant landmarks from the American Civil Rights Movement.)",
        "Alaska (U.S. state on the northwest extremity of North America) "
      },
      local!stateLabels: { "Alabama", "Alaska" },
      local!stateAbbreviations: { "AL", "AK" },
      {
        a!pickerFieldCustom(
          label: "States",
          instructions: "Select up to three desired office locations",
          maxSelections: 3,
          /*
          * To use with your data, replace local!stateLabels with the datapoint  you wish to be displayed and 
          * local!stateAbbreviations with the datapoint you eventually want to save. 
          */
          suggestFunction: rule!PA_arrayPicker(
            filter: _,
            labels: local!stateLabelsWithDesc,
            identifiers: local!stateAbbreviations
          ),
          selectedLabels: a!forEach(
            items: local!pickedStates,
            expression: index(
              local!stateLabels,
              wherecontains(fv!item, local!stateAbbreviations)
            )
          ),
          selectedTooltips: a!defaultValue(local!pickedStates, null),
          value: local!pickedStates,
          /* The union() function allows duplicate states to be ignored, returning only unique elements.*/
          saveInto: a!save(
            local!pickedStates,
            union(save!value, save!value)
          )
        )
      }
    )

Reply
  • 0
    Certified Senior Developer
    in reply to lalithap7428

    You will get the code in the custom picker documentation

    link: Configure an Array Picker that Ignores Duplicates

    Just update the main interface by adding a new local like this:

    a!localVariables(
      local!pickedStates,
      local!stateLabelsWithDesc: {
        "Alabama (southeastern U.S. state that’s home to significant landmarks from the American Civil Rights Movement.)",
        "Alaska (U.S. state on the northwest extremity of North America) "
      },
      local!stateLabels: { "Alabama", "Alaska" },
      local!stateAbbreviations: { "AL", "AK" },
      {
        a!pickerFieldCustom(
          label: "States",
          instructions: "Select up to three desired office locations",
          maxSelections: 3,
          /*
          * To use with your data, replace local!stateLabels with the datapoint  you wish to be displayed and 
          * local!stateAbbreviations with the datapoint you eventually want to save. 
          */
          suggestFunction: rule!PA_arrayPicker(
            filter: _,
            labels: local!stateLabelsWithDesc,
            identifiers: local!stateAbbreviations
          ),
          selectedLabels: a!forEach(
            items: local!pickedStates,
            expression: index(
              local!stateLabels,
              wherecontains(fv!item, local!stateAbbreviations)
            )
          ),
          selectedTooltips: a!defaultValue(local!pickedStates, null),
          value: local!pickedStates,
          /* The union() function allows duplicate states to be ignored, returning only unique elements.*/
          saveInto: a!save(
            local!pickedStates,
            union(save!value, save!value)
          )
        )
      }
    )

Children