Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rich PRich P 

Tooltip not appearing with radio buttons

I am trying to setup radio buttons with descriptive text on mouseover, however the tooltip text is not appearing. The rendered HTML appears correct. I am wondering if there is some way to make this work, or if I will need to resort to using Javascript with standard HTML input fields. Here is the current code that is not displaying tooltips:

 

      <apex:selectRadio id="select_1a" value="{!Evaluation__c.CommunityNeed__c}">
          <apex:selectOption itemValue="1" itemLabel="Low" title="Little or no description of community need"/>
          <apex:selectOption itemValue="2" itemLabel="Medium" title="Describes community need in general terms and offers little or no verifiable supporting research or data"/>
          <apex:selectOption itemValue="3" itemLabel="High" title="Describes community need in specific terms and includes verifiable supporting research or data"/>
      </apex:selectRadio>

 

The following alternate code on the same page shows the tooltip but will require extra work to save selected values to the Evaluation object:

 

    <table>
    <tr><td>

    <input name="community_need_options" type="radio" value="1"><label for="community_need_options" title="Little or no description of community need">Low&nbsp;&nbsp;</label></input>
    </td><td>
    <input name="community_need_options" type="radio" value="2"><label for="community_need_options" title="Describes community need in general terms and offers little or no verifiable supporting research or data">Medium&nbsp;&nbsp;</label></input>
    </td><td>
    <input name="community_need_options" type="radio" value="3">
    <label for="community_need_options" title="Describes community need in specific terms and includes verifiable supporting research or data">High&nbsp;&nbsp;</label></input>
    </td></tr>
    </table>

 

Thanks.

Rich

Best Answer chosen by Admin (Salesforce Developers) 
stephanstephan

Here's a workaround. Instead of selectOption tags, use selectOptions:

 

 

<apex:selectOptions value="{!items}"/>

Then in your controller, construct your options like this:

 

 

    public List<SelectOption> getItems() {List<SelectOption> options = new List<SelectOption>();
        SelectOption so1 = new SelectOption('US','<span title="United States">US</span>');
        so1.setEscapeItem(false);
        options.add(so1);
        SelectOption so2 = new SelectOption('Canada','<span title="The Great White North">Canada</span>');
        so2.setEscapeItem(false);
        options.add(so2);
        return options;
    }

 

 

I just tested this and it seems to work.

 

 

...stephan

All Answers

imuinoimuino

Try this:

 

 <apex:selectList id="select_1a" value="{!Evaluation__c.CommunityNeed__c}">
          <apex:selectOption itemValue="1" itemLabel="Low" title="Little or no description of community need"/>
          <apex:selectOption itemValue="2" itemLabel="Medium" title="Describes community need in general terms and offers little or no verifiable supporting research or data"/>
          <apex:selectOption itemValue="3" itemLabel="High" title="Describes community need in specific terms and includes verifiable supporting research or data"/>
</apex:selectList>

 

Use a select List tag instead of select Radio, please reply if it works.

 
Rich PRich P

I did as you requested and see the options in a Select List, however the tooltip text is still not appearing. As a sanity check, here is the code I tested:

 

      <apex:selectList id="select_1a" value="{!Evaluation__c.CommunityNeed__c}">
          <apex:selectOption itemValue="0" itemLabel="No response"/>
          <apex:selectOption itemValue="1" itemLabel="Low" title="Little or no description of community need"/>
          <apex:selectOption itemValue="2" itemLabel="Medium" title="Describes community need in general terms and offers little or no verifiable supporting research or data"/>
          <apex:selectOption itemValue="3" itemLabel="High" title="Describes community need in specific terms and includes verifiable supporting research or data"/>
      </apex:selectList>

 

Could this be a CSS issue?
imuinoimuino

Im not sure, i did check and aparently salesforce isn't setting the title attribute to the radio button on the loaded page i dont knoe if it is because of some code error or something like a bug.

I did copy and paste of your code in a new clean page with nothing more than the code you posted but it still doesn't work.
stephanstephan

I've confirmed this is a bug. Thanks for bringing this up. I'm trying to figure out a workaround for you...
Rich PRich P

Stephan,

Thanks for your attention to this. In figuring out a workaround it may be helpful to note that adding the "title" attribute to the input tag typically causes the tooltip text to appear when one hovers over the radio button but not the text. In the alternate version of the code that I provided, I added the label tag so that the tooltip would be triggered by the text instead of the button itself. At this point I would be happy with either element triggering the tooltip text, however I though this might give some insight into what is happening within the apex:selectOption component

 

Another thing to note is that the Apex Component Guide (https://test.salesforce.com/apexpages/apexcomponents.apexp) claims that the selectOption component can only be used with selectList or selectCheckbox, however I have tested it with selectRadio and found that it correctly sets values in a picklist field when the page is saved.

 

Rich P
Rich PRich P

, thanks for testing this for me.
stephanstephan

Here's a workaround. Instead of selectOption tags, use selectOptions:

 

 

<apex:selectOptions value="{!items}"/>

Then in your controller, construct your options like this:

 

 

    public List<SelectOption> getItems() {List<SelectOption> options = new List<SelectOption>();
        SelectOption so1 = new SelectOption('US','<span title="United States">US</span>');
        so1.setEscapeItem(false);
        options.add(so1);
        SelectOption so2 = new SelectOption('Canada','<span title="The Great White North">Canada</span>');
        so2.setEscapeItem(false);
        options.add(so2);
        return options;
    }

 

 

I just tested this and it seems to work.

 

 

...stephan

This was selected as the best answer
Rich PRich P

I believe that this will mean having to abandon using the 'standardcontroller="Evaluation__c"' with all of the built-in handling for field definitions. I will weigh this against a Javascript based solution for the radio buttons and respond with my results.

 

Thanks.
stephanstephan

Not necessarily. You could simply include the getter for the select options in a controller extension.

 

...stephan
Rich PRich P

Thanks, I will look into that. -- Rich
Rich PRich P

Thanks Stephan, that did the trick, and I learned how to extend the standard controller class in the process.

 

--Rich
Rich PRich P
This is an old thread, but I should have posted my solution:

in the controller:

    public List<SelectOption> getItemOptions_1a() {
        List<SelectOption> options = new List<SelectOption>();
        SelectOption so1 = new SelectOption('1','<span title="Program provides general demographic OR socioeconomic summary of population served">Low</span>');
        so1.setEscapeItem(false);
        options.add(so1);
        SelectOption so2 = new SelectOption('2','<span title="Program provides detailed demographic OR socioeconomic summary of population served">Medium</span>');
        so2.setEscapeItem(false);
        options.add(so2);
        SelectOption so3 = new SelectOption('3','<span title="Program provides demographic, socioeconomic, AND geographic  data to describe  population served">High&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>');
        so3.setEscapeItem(false);
        options.add(so3);
        SelectOption so4 = new SelectOption('0','No Response');
        so4.setEscapeItem(false);
        options.add(so4);
        return options;
    }

in the page:

        <tr><td>
        <b><apex:outputText value="{!itemLabel_1a}" /></b>
        </td><td>
            <apex:selectRadio id="line_1a" value="{!Evaluation__c.X1a_picklist__c}">
                <apex:selectOptions value="{!itemOptions_1a}"/>
            </apex:selectRadio><br/>
        </td></tr>