Mouseover popup on comment bubble report

Question

Application Express 4.2.1.00.08
Internet Explorer - 8
Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - 64bit Production
Theme - Productivity - 26
Hi I have a report based on the comment bubble template, what I need is to show a popup on mouseover to show more information. I looked at the packaged applications that come with Apex 4.2 and the Artwork Cataloge application seems to have a region based on plsql and on mouseover a really nice popup appears showing more information. I am wondering how I could do the same for my comment bubble report using this method. I'm not sure how to do it as my report/region is not based on plsql. Can anyone help me, I'm new to Apex so still finding my feet.
Regards
Ash

Answer 1

Here is a the code from the "Recent bugs" region, but stripped of their complexity - and stripped of identifying objects from my code, so you pretty much just need to fill in the sql, and clean it up... it was very quick and dirty
declare
  d                     date;
  l_status              varchar2(30);
begin
  d := sysdate;
  sys.htp.p('<ul class="detailedStatusList">');
  for c1 in (
    SELECT ...
    FROM ...
  ) loop
    sys.htp.p('<li>');
    sys.htp.p(' <a h...ref="'||apex_util.prepare_url('f?p='||:app_id||':61:'||:app_session||'::NO:61,RP:Pn_item_ID:'||sys.htf.escape_sc(c1.id))||'">');
    --sys.htp.p('     <img src="'||sys.htf.escape_sc(replace('#IMAGE_PREFIX#e2.gif','#IMAGE_PREFIX#',:image_prefix))||'" alt="" />');   
    sys.htp.p('     <span>'||sys.htf.escape_sc(substr(c1.description,1,150))||'</span>');
    sys.htp.p('<em>Groups:'||c1.grp_count||'</em>');
    sys.htp.prn('</a>');
    sys.htp.p(' <section class="detailedListTooltip">');
    sys.htp.p('   <h4>Callup List: '||sys.htf.escape_sc(c1.description)||'</h4>');
    sys.htp.p('       <ul>');
    sys.htp.p('     <li>');
    sys.htp.p('       <label>Created by</label>');
    sys.htp.p('       <span>'||sys.htf.escape_sc(c1.created_by)||'</span>');
    sys.htp.p('     </li>');
    sys.htp.p('     <li>');
    sys.htp.p('       <label>Created</label>');
    sys.htp.p('       <span>'||sys.htf.escape_sc(apex_util.get_since(c1.created_date))||'</span>');
    sys.htp.p('     </li>');
    sys.htp.p('     <li>');
    sys.htp.p('       <label>Created date</label>');
    sys.htp.p('       <span>'||sys.htf.escape_sc(c1.created_date)||'</span>');
    sys.htp.p('     </li>');
    sys.htp.p('<hr>');
    sys.htp.p('     <li>');
    sys.htp.p('       <label>(Group)</label>');
    sys.htp.p('       <span>(distribution)</span>');
    sys.htp.p('     </li>');
    for r_rec in  (
select cg.group_name
      ,listagg((select  from )||' ('||cnt||')','<br>') within group (order by cnt desc) la
from  cg
    ,(select count(*) cnt,
      from  ci
      group by ) ci
where
group by cg.
order by cg.order_seq
    ) loop
      sys.htp.p('<li>');
      sys.htp.p('<label>'||r_rec.group_name||'</label>');
      sys.htp.p('<span>'||r_rec.la||'</span>');
      sys.htp.p('</li>');
    end loop;
    sys.htp.p('       </ul>');
    sys.htp.p(' </section>');
    sys.htp.p('</li>');
  end loop;
  sys.htp.p('</ul>');
end;I've worked out how to translate it into a list template, so all you need to do is feed a query and you get the standard layout - I'll blog the instructions when I get a chance.
Scott