2

I am providing the sample code for the issue described below:

<aura:application extends="force:slds">
    <aura:attribute name="statusOptions" type="List" default="[]"/>
    <aura:handler name="init" value="{! this }" action="{! c.loadOptions }"/>

    <lightning:combobox aura:id="selectItem" 
                        name="status" 
                        label="Status"
                        placeholder="All"
                        onchange="{!c.handleOptionSelected}"
                        title="{!v.value}"
                        options="{!v.statusOptions}"/>    
</aura:application>

This is how I am defining the options that are displayed in lightning:combobox.

({
    loadOptions: function (component, event, helper) {
        var options = [
            { value: "US", label: "United States" },
            { value: "UK", label: "United Kingdom" }
        ];
        component.set("v.statusOptions", options);
    },
    handleOptionSelected: function (cmp, event) {
        var selectedOptionValue = event.getParam("value");
        console.log(selectedOptionValue);
    }
})

The issue is that when I hover over any element in the picklist, it displays the label, i.e. United States or United Kingdom.

enter image description here

The requirement is that I have to show the value property of the statusOptions as tooltip text, i.e. US or UK.

I checked the documentation and found that there is a title attribute defined for this component. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_combobox.htm

That is why I have added title="{!v.value}" in the component markup. But this is not working as expected; it is still showing the label property. Seems like this is a bug. Please let me know of any other ideas that will work.

  • what you want is to have title attribute on the options - but it does not exist, also the documentation state that there are only these attributes: class, selected, label, and value. So I think what you are trying to achieve is not possible in a standard way. What you could do is hack the DOM and insert the title with javascript – Itai Shmida Mar 4 '18 at 7:53
  • If you see the link for the documentation which I have posted, then they have mentioned about this title attribute. Also as this component is in lightning namespace, so I can't hack the DOM. – snl Mar 4 '18 at 10:53
  • The title attribute is for the whole component - not for the items inside it. And you can hack the dom - use dev tools to see where the items are and then you can find them and change them with javascript – Itai Shmida Mar 4 '18 at 10:59
  • How can I hack the DOM? Can you explain how to do it? Any article or link? – snl Mar 4 '18 at 13:36
  • 1
    I am not an expert on that, better wait for an expert... – Itai Shmida Mar 4 '18 at 13:58

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.