function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sascha DeinertSascha Deinert 

Tooltip linebreak Component

Hi, 

I found the following code for a tooltip in combination with a component.

How can I add a linebreak into this text. <br/> is not working.
<c:helpicon helpText="
Example: 1215551212.
No dashes, please
"/>


Thanks,
Sascha


 
<apex:component selfClosing="true">
<apex:attribute name="helpText" description="Help Text." type="String" required="true"/>
<div class="mouseOverInfoOuter" id="searchInvoiceHelper" onfocus="addMouseOver(this)" onmouseover="addMouseOver(this)" tabindex="0">
    <img src="/s.gif" alt="" class="infoIcon" title="" />
    <div class="mouseOverInfo" id="searchInvoiceHelperText" style="display: none; opacity: -0.19999999999999996; left: 16px;">
        <div class="body">{!helpText}</div>
    </div>
</div>
</apex:component>
 
<apex:page >
    <apex:sectionHeader title="Help Icon Test" />
    <apex:form>
        <apex:pageBlock>
            <apex:outputText value="enter your phone number" />
            <apex:inputText /><c:helpicon helpText="Example: 1215551212. No dashes, please"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

 
Best Answer chosen by Sascha Deinert
AnjithKumarAnjithKumar
Hello Sascha,

Please find the updated code of page and component.
 
<apex:component selfClosing="true">
    <apex:attribute name="helpText" description="Help Text." type="String" required="true"/>
    <script>
        var div = document.createElement('div');
        div.innerHTML = '<div class="body">{!helpText}</div>';
        setTimeout(function() {
            var searchInvoiceHelperText = document.getElementById('searchInvoiceHelperText').appendChild(div);
        }, 1000);
    </script>
    <div class="mouseOverInfoOuter" id="searchInvoiceHelper" onfocus="addMouseOver(this)" onmouseover="addMouseOver(this)" tabindex="0">
        <img src="/s.gif" alt="" class="infoIcon" title="" />
        <div class="mouseOverInfo" id="searchInvoiceHelperText" style="display: none; opacity: -0.19999999999999996; left: 16px;">
            
        </div>
    </div>
</apex:component>
 
<apex:page >
    <apex:sectionHeader title="Help Icon Test" />
    <apex:form>
        <apex:pageBlock>
            <apex:outputText value="enter your phone number" />
            <apex:inputText /><c:helpicon helpText="Example: 1215551212. <br/>No dashes,<br/> please"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

You can use any html tag on the helptext.

Hope that helps you.

Thanks,
Anjith Kumar.

All Answers

AnjithKumarAnjithKumar
Hello Sascha,

Please find the updated code of page and component.
 
<apex:component selfClosing="true">
    <apex:attribute name="helpText" description="Help Text." type="String" required="true"/>
    <script>
        var div = document.createElement('div');
        div.innerHTML = '<div class="body">{!helpText}</div>';
        setTimeout(function() {
            var searchInvoiceHelperText = document.getElementById('searchInvoiceHelperText').appendChild(div);
        }, 1000);
    </script>
    <div class="mouseOverInfoOuter" id="searchInvoiceHelper" onfocus="addMouseOver(this)" onmouseover="addMouseOver(this)" tabindex="0">
        <img src="/s.gif" alt="" class="infoIcon" title="" />
        <div class="mouseOverInfo" id="searchInvoiceHelperText" style="display: none; opacity: -0.19999999999999996; left: 16px;">
            
        </div>
    </div>
</apex:component>
 
<apex:page >
    <apex:sectionHeader title="Help Icon Test" />
    <apex:form>
        <apex:pageBlock>
            <apex:outputText value="enter your phone number" />
            <apex:inputText /><c:helpicon helpText="Example: 1215551212. <br/>No dashes,<br/> please"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

You can use any html tag on the helptext.

Hope that helps you.

Thanks,
Anjith Kumar.
This was selected as the best answer
takasetakase
I could do it with this code
<div class="body"><apex:outputLabel escape="false" value="{!helpText}"></apex:outputLabel></div>