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.