Hyperlink in help text which comes from XML

Question

I have some XML where the link and video of a particular tab are placed. My requirement is when I click on a tabsection of a tab, helptext should be displayed next to it, and when I mouseover it, hyperlink of a link and video should be displayed.

Is this possible? If yes how can I do it?

I'm using Http Callout & Dom.Document for the Xml.

My Apex class is

public string main(string url)
    {

            Http h = new Http();    
            HttpRequest req = new HttpRequest();
            req.setEndpoint(url);
            req.setMethod('GET');
            req.setTimeout(60000);
            string hresult='';
            system.debug('isssss'+isValid);
            if(isValid==true)
            {
                HttpResponse hres = h.send(req);
                hresult = hres.getBody();
                system.debug('------'+hresult);
            }else{
                hresult = '<?xml version="1.0" encoding="ISO-8859-1"?><HelpTextDetails><BaseURL>http://click-pledge.v-empower.com/web/HelpText/HelpTextXml</BaseURL><HelpTab TabName="C&P InvoicePayment" label="C&P InvoicePayment"><TabSection Name="C&P InvoicePayment"><HelpLink><a href="http://manual.clickandpledge.com/Portal-Virtual-Terminal.html" target="_blank">C&P InvoicePayment Link</a> </HelpLink><HelpVideo><a href="http://manual.clickandpledge.com/Portal-Virtual-Terminal.html" target="_blank">C&P InvoicePayment Link</a> </HelpVideo></TabSection></HelpTab></HelpTextDetails>';
                system.debug('------'+hresult);
            }           
            return hresult;
    }

public list<helptextclass1> gethelptab(){
    List<helptextclass1> option= new List<helptextclass1>(); 
     system.debug('url'+url);
    try{
        helpXml = main(url);
        system.debug('urlllllllllll'+url);
    }catch(System.CalloutException e){
        system.debug('Error: '+e);
    }
    Dom.document doc = new Dom.document();
    doc.load(helpxml);
    Dom.XMLNode elementsList = doc.getRootElement(); 
    string CategoryName = '';
    if(elementsList !=NULL){
             for(Dom.XMLNode child : elementsList.getChildElements()) { 
                   helptextclass1 fields = new helptextclass1();
                     boolean checkCategory=false;                    
                     system.debug('childNodes'+child.getName());
                     if(child.getName()=='BaseURL')
                     {
                        baseUrl=child.getText();
                     }          
                     if(child.getName()=='HelpTab')
                     {    
                             CategoryName = child.getAttribute('TabName',null);                     

                             fields.Label=child.getAttribute('TabName',null);
                              system.debug('aaaaaa'+fields); 
                             option.add(fields);
                             system.debug('selectttttt'+option);         
                 }                           
           }                        
        }            
         return option;                       
}    

public class helpTextClass1{
    public string label{get;set;}
}    

public class helptabclass{
    public string tablabel{get;set;}
    public string tablabel2{get;set;}
}
public list<helpSectionclass> gethelpSectionname(){
    List<helpSectionclass> options = new List<helpSectionclass>(); 
    try{
        helpXml = main(url);
     }catch(System.CalloutException e){
        system.debug('Error: '+e);
    }
    Dom.document doc = new Dom.document();
    doc.load(helpxml);
    Dom.XMLNode elementsList = doc.getRootElement(); 
    Dom.XMLNode Category = elementsList.getChildElement('HelpTextDetails',null);
    string Textname = '';
    if(elementsList!=NULL){
                for(Dom.XMLNode child : elementsList.getChildElements()) { 

                    boolean checkCategory=false;                    

                         if(child.getName()=='HelpTab')
                          {       
                                                              if(child.getAttribute('TabName',null) == Name1){ 

                                    checkCategory=true;    

                              }


                          } 
                          if(checkCategory==true)
                       {               

                        for(Dom.XMLNode subchild : child.getChildElements()) {
                        helpSectionclass field2 = new helpSectionclass();
                                   boolean checktemp=false;
                          if(subchild.getName()=='TabSection'){

                                 Field2.tabSectionlabel = subchild.getAttribute('Name',null);
                                 options.add(Field2);
                               }
                           }
                       }        
                  }
              }
              return options;                   
} 

and my VF Page is

<apex:actionFunction action="{!Networklist}" reRender="selectsection"  name="calldisplayTemplate" >
          <apex:param assignTo="{!Name1}" name="networkvalue" value=""/>         
   </apex:actionFunction>
 <apex:repeat value="{!helptab}" var="help">
       {!help.Label}
        <input type="radio" value="{!help.Label}" name="help" onclick="NetWorkdata('{!help.Label}');" /> 
   </apex:repeat><br/>

  <apex:outputPanel id="selectsection">
  <apex:repeat value="{!helpsectionName}" var="section"  >
     {!section.tabSectionlabel}
 </apex:repeat>
 </apex:outputPanel>

section.tabSectionlabel -------- I will be getting a value of link(say suppose 'www.google.com').Upto here everything works fine.Now I need to pass this link Value in HelpText(instead of video). How can I do it

something like this

Answer 1

Here's an example using Visualforce $Component handles:

<apex:page>

  <style>
    .helpLink {
      position:relative;
    }

    .videoPanel {
      display:none;
      width:160px;
      height:120px;
      background:#EEE;
      border:1px solid #CCC;

      position:absolute;
      left:-160px;
      z-index:10;
    }
  </style>

  <apex:pageBlock>
    <apex:tabPanel>
      <apex:tab title="herp">

        <!-- your help icon here -->
        <apex:outputLink
        styleClass="helpLink"
        onmouseover="document.getElementById('{!$Component.Foo}').style.display='block';"
        onmouseout="document.getElementById('{!$Component.Foo}').style.display='none';">
          <apex:image value="/s.gif" styleClass="helpIcon" />
        </apex:outputLink>

        <!-- your video here -->
        <apex:outputPanel id="Foo" styleClass="videoPanel">
          video
        </apex:outputPanel>

      </apex:tab>
    </apex:tabPanel>
  </apex:pageBlock>
</apex:page>