How to add line breaks into custom component hover help

Question

I was googling to find a way to Make the help Icon text look nice, However I got an option of Inline Text option. apart from this Is there any option we have to make it pretty.

Here is my code :

<apex:outputPanel rendered="{!order.Type=='Mobile Clock'}">
                <apex:actionRegion >
                    <table style="width:50%;">
                        <tr>
                            <td style="text-align:right;width:35%;font-weight:bold;font-size:11px;color:#4a4a56;padding-right: 2px;">
                                <c:helpicon helpText="NOT REQUIRED:The Employee can punch in and out anywhere and the app does not track where the punch took place.
                                 GEO-LOCATION REQUIRED:Allows punches from anywhere.Requires location services to be enabled on the employees cell phone.The app will record where the punch took place.
                                 GEO-FENCE WARNING:A geo fence is set around a location.IF any employee punches outside this location a warning will appear.The employee has the option to continue to punch in or they can choose not to punch in.
                                 GEO-FENCE REQUIRED:Employee is required to be within the geo fence location in order to punch into or out using the application." />
                                Clock Location Restrictions
                            </td>
                            <td style="padding-left: 10px;">
                                <apex:outputLabel value="." styleClass="required"></apex:outputLabel>
                                <apex:inputField value="{!order.Clock_Location_Restriction__c}">
                                    <apex:actionSupport event="onchange" reRender="clockinformation" oncomplete="this.focus();" status="ocstatus"/>
                                </apex:inputField>
                            </td>
                        </tr>
                    </table>
                </apex:actionRegion>

And this is How the text looks in the form.

Answer 1

I believe you will need to make changes similar to the following:

The helpicon visualforce component:

<apex:component>
    <!-- Change the component attribute from just taking a string to have it accept a list of strings -->
    <apex:attribute name="helpText" type="String[]" description="The help text"/>
    <!-- Then loop through that list and add a <br> after each line -->
    <apex:repeat value="{!helpText}" var="ht">
    {!ht} <br/>
    </apex:repeat>
</apex:component>

The visualforce page controller:

public  class MyController {
    /* Set up the strings as a list in the page controller */
    public list<String> getHelpText(){return new list<String>{
      'NOT REQUIRED:The Employee can punch in and out anywhere and the app does not track where the punch took place.',
      'GEO-LOCATION REQUIRED:Allows punches from anywhere.Requires location services to be enabled on the employees cell phone.The app will record where the punch took place.',
      'GEO-FENCE WARNING:A geo fence is set around a location.IF any employee punches outside this location a warning will appear.The employee has the option to continue to punch in or they can choose not to punch in.',
      'GEO-FENCE REQUIRED:Employee is required to be within the geo fence location in order to punch into or out using the application.'
    };}
}

The visualforce page:

<apex:page controller="MyController">
    <!-- have the helpicon component get it's helpText value from that variable in the controller -->
    <c:helpicon helpText="{!HelpText}" />
</apex:page>

I'll admit my version here doesn't look very nice and proper, but it does have the line breaks at least. The formatting you already have in your component shouldn't need to be changed and it will look better than this: