I am using Duallist to utilise the multi picklist feature, but I need to add an info icon as well, next to each value of the duallist, and that will have the help text on mouse hover it will be show up.

I am using wrapper to populate options which has currently label, value and help text in it. Please let me know if its even possible with DualList? thanks in advance.

I am trying to achieve something like shown in below, the help text icons. enter image description here

<aura:attribute name="options" type="List" default="[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<lightning:dualListbox name="languages" label= "Select Languages" sourceLabel="Available" selectedLabel="Selected" 
                       fieldLevelHelp="This is a dual listbox" 
                       onchange="{! c.handleChange }">



handleChange: function (cmp, event) {
    var selectedOptionValue = event.getParam("value");

doInit: function (cmp, event, helper) {



  • Sadly this doesn't seem to be supported by the base component; at-least at the moment, you may have to write your own markup in custom component.
    – Raul
    Jun 15, 2019 at 15:51
  • Use my custom component - has drag and drop and click to move - it's way better and you can customize it. github.com/rapsacnz/OrderedListGroup Mar 22, 2021 at 22:26


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.