function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mitesh SuraMitesh Sura 

Display HTML on mousehover

Need help displaying HTML table as tooltip. I got below code from other thread. It works fine, but it displays HTML as OutputText. 

 

Any idea how I can modify this to show HTML as mouseover? Thanks. 

 

Class

public Component.Apex.OutputText getGadgetHTMLContent(){
           Component.Apex.OutputText oppText = new Component.Apex.OutputText(escape = false);
           oppText.value = gadgetContent;       //gadgetcontent is the variable which holds the HTML content
           return oppText ;
}

VF Page

<apex:outputPanel rendered="{!gadgetHTMLContent!= null}" layout="none">
          <apex:dynamicComponent componentValue="{!gadgetHTMLContent}"/>
</apex:outputpanel>

Ashish_SFDCAshish_SFDC
Hi , 

You can use apex column in your pageBlock table.column has attribute called title for display a tool tip dynamically.


<apex:column value="{!xxx.Id}" title="{!xxx.Name}"/>

https://developer.salesforce.com/forums?id=906F000000096TKIAY

OR

Below is the code:
<apex:page controller="HomePageController">
<script>
    function checkFn()
    {
        document.getElementById("sample").style.display = '';
    }
    function removeFn()
    {
        document.getElementById("sample").style.display = 'none';
    }   
</script>

  <apex:form >
    <apex:selectCheckboxes value="{!appType}" onmouseover="checkFn();" onmouseout="removeFn();" title="check">
      <apex:selectOptions value="{!items}" />
    </apex:selectCheckboxes>  
    <div id="sample" style="display:none">
//HERE INSTEAD OF IMAGE CALL YOUR HTML
        <apex:image url="http://ycombinator.com/images/yc500.gif" height="50px" width="60px"/>
    </div>

  </apex:form>
</apex:page>

https://developer.salesforce.com/forums/ForumsMain?id=906F000000097f8IAA
Ashish_SFDCAshish_SFDC
OR Use this one,

<style>
    a:hover {
        background:#ffffff; /*BG color is a must for IE6*/
        text-decoration:none;
    }
    a.tooltip span {
        display:none;
        padding:2px 3px;
        margin-left:8px;
        width:250px;
    }
    a.tooltip:hover span{
        display:inline;
        position:absolute;
        background:#FFC;
        border:1px solid #cccccc;
        color:#000000;
    }
</style>

<a class="tooltip" target="_blank">mouse me
<span>{!a.Name} - {!a.Phone}</span>
</a>

Also, See the below links, 

http://www.codespokes.com/2013/04/salesforce-helptext-with-custom-tooltip.html

http://shivasoft.in/blog/salesforce/salesforce-helptext-like-custom-tooltip-using-jquery/


Regards,
Ashish
ISVforce PartnerISVforce Partner
Thanks Ashish. It helped but not what I was looking for. Your first example if not really a tool tip, so it messes the structure of the page with div element. 

While 2nd example is tooltip, but I still cannnot do simple thing as line break. Instead of {!a.Name}, lets say I had {!message} and that message has <br/> tag, it will show the tag. Any clue?
Ashish_SFDCAshish_SFDC
Hi, 

Can you explain a bit more, I did not quite understand that line break did not work.. can you add a screenshot via tinypic.com ? 

Regrads,
Ashish
Mitesh SuraMitesh Sura
Ashish,

Please see this image. I would like to do line breaks, but it still shows <br/> tag. http://tinypic.com/r/n1xq9w/8 

Here is the code:
<a class="tooltip" target="_blank">{!itemMap[key].tieredPricing.Name}
       <span>{!itemMap[key].tieredMessage}</span>
       </a>

Thank you for your time. 
Mitesh SuraMitesh Sura
Image without the clutter.. http://oi60.tinypic.com/n1xq9w.jpg
Ashish_SFDCAshish_SFDC
Hi , 


Try this, 

<a ref="#" title="First Line
                  Second Line
                  Third line">Hover Me</a>


Or, 

The &#013; combined with the style white-space: pre-line; .

http://stackoverflow.com/questions/3340802/add-line-break-within-tooltips


Regards,
Ashish
Mitesh SuraMitesh Sura
No luck. Below is the code.

<a  class="tooltip" target="_blank">{!itemMap[key].tieredPricing.Name}
       <span style="white-space: pre-wrap;">{!itemMap[key].tieredMessage}</span>
</a>

Tooltip is dynamic so I cannot have seprate line up front.
Ashish_SFDCAshish_SFDC

Hi , 


Is it working now with the code that you posted?

Can you share an image via tinypic.com


Regards,

Ashish
Mitesh SuraMitesh Sura
I have been trying few other things, so I commented that code. the image is same as what I shared previously. It shows <br/> and  &#013; tags as is. 
Ashish_SFDCAshish_SFDC
Hi , 

Try this code, 

<apex:pageblockSectionItem >
                             <span class="helpButton" id="LastName-_help">
                                      <label>Name</label>
                                      <img src="/s.gif" alt="" class="helpOrb" title=""/>
                                      <script type="text/javascript">sfdcPage.setHelp('LastName', 'First line <br/> Second line');</script>
                             </span>
                             <apex:inputField value="{!Contact.LastName}"/>
                </apex:pageblockSectionItem>
Make sure you set the highlighted values. Best way will be setting the API name of the field there

https://developer.salesforce.com/forums/ForumsMain?id=906F0000000999FIAQ


Also, See the blog below, 

http://www.chiragmehta.info/chirag/2009/01/14/help-bubble-hover-based-tooltip-visualforce/



Regards,
Ashish
Mitesh SuraMitesh Sura
Ashish, I did see that post. But there is no way to change the size of tooltip with that approach.. or if there is, I did not find one. 

The text in the tooltip may be long and I would like to accomodate it on one line. It should break, only if there is "<br>" tag. Do you think that can be acheived? 

regards
MItesh
Ashish_SFDCAshish_SFDC
Hi Mitesh, 


Try this,

<a href="person.html?id=212" title="More info &#13 and even more info">Andrew Watson</a>

Did you check the behavior with different browsers?


Regards,
Ashish
John TJohn T
I'm trying to do pretty much the same thing, with the same result. The hoverhelp is rendered as text rather than HTML, so I see tags instead of line breaks, formatting, etc....
John TJohn T
I've had a similar issue. My workaround was to create a text area field in SFDC, and bind that field to title attribute of the element that I wanted to have a multi-line hover invoked, tooltip.