Creating popup tip box visualforce

Question

I am trying to create a dialog box that appears when a user hovers their mouse over output text on a visualforce table. I am currently using CSS methods to generate a output panel whenever a user hovers over the cell, but this seems to not be very effective and needs to debugged quite a bit (before and after below):

Essentially I want something similar to this:

Where if you click it or hover over it (it being the output text in my case) you get a menu that you can click whatever on, but if you leave that menu's bounds the menu vanishes.

The problem I am having is that I am completely lost. I have no direction, and almost all of my google searches have no information that is pointing me in the correct direction. If anyone could help me by even leading me in the correct direction, I would be very thankful.

Answer 1

I suggest you first get clear in your mind what you are looking for - tooltips or a menu?

This tooltip CSS looks promising https://chrisbracco.com/a-simple-css-tooltip/ if that meets your needs.

If your needs are more complex, it can be most effective to leverage the work of others who have dealt with problems such as browser compatibility and also hidden the complexities behind a simple API. One of these two libraries might be helpful to you:

• https://jqueryui.com/tooltip/
• http://swisnl.github.io/jQuery-contextMenu/index.html

So your job becomes figuring out how to include and use the libraries in your page rather than dealing with the JavaScript or CSS issues yourself. (Though you will have to get moderately comfortable with JavaScript and CSS.)

Answer 2

I think this extract from the excellent Visualforce Development Cookbook by Keir Bowden will really help point you in the right direction.

Opening a pop-up window

In this recipe, we will create a page that renders a list of accounts, displaying a very small subset of fields per row. A link will be provided on each row to allow the user to view full details of the account in a pop-up window.

Note - there is no way to ensure that a browser will display a pop-up window. Pop-up blockers generally allow windows to be opened in response to an action by the user, such as clicking on a link, but it is possible for users to configure their browser to block all pop-ups regardless of how they were triggered.

This recipe requires 2 Visualforce pages to be created: the main page containing the list of accounts and the pop-up window page. The pop-up page is referenced by the main page, so this will be created first.

Create a VF page called 'Popup'. Paste the contents of the Popup.page file into the VF page markup area. Save the page.

<apex:page standardController="Account" sidebar="false" showHeader="false">
  <apex:sectionHeader title="Account" subtitle="{!Account.Name}"/>
  <apex:detail relatedList="false"/>
</apex:page>

Then do the same but for a VF page called 'PopupMain'.

<apex:page standardController="Account" recordSetVar="accs">
  <apex:pageBlock >
    <apex:pageBlockTable value="{!accs}" var="acc">
      <apex:column headerValue="Action">
         <apex:outputLink title="View detail in a popup window" onclick="return openPopup('{!acc.Id}');">Details</apex:outputLink>
      </apex:column>
      <apex:column value="{!acc.Name}" />
      <apex:column value="{!acc.Industry}" />
      <apex:column value="{!acc.Type}" />
    </apex:pageBlockTable>
  </apex:pageBlock>
  <script>
    function openPopup(id)
    {
        var newWin=window.open('{!$Page.Popup}?id=' + id, 'Popup',
               'height=600,width=650,left=100,top=100,resizable=no,scrollbars=yes,toolbar=no,status=no');
        if (window.focus) 
        {
            newWin.focus();
        }

        return false;

    }
  </script>
</apex:page>

How it works

Opening the following URL into your browser displays a list of accounts:

https://<instance>/apex/PopupMain

Note - as this page uses a standard list controller, the list of accounts displayed will be that of the last list view that the user accessed.

The detail link markup is a follows:

Details

The onclick attribute defines the JavaScript function to be invoked when the link is clicked; note the {!acc.Id} merge field, which passes the ID of the chosen account to the function.

The JavaScript function uses the window.open function to open the new window.

var newWin=window.open('{!$Page.Popup}?id=' + id, 'Popup',
               'height=600,width=650,left=100,top=100,resizable=no,scrollbars=yes,toolbar=no,status=no');

The final parameter details the features required for the new window as a comma separated list of name=value pairs.

In this book, there is another chapter about how to capture information from a pop-up window and pass the information back to the main window to populate input fields.