This site is currently read-only as we are migrating to Oracle Forums for an improved community experience. You will not be able to initiate activity until January 31st, when you will be able to use this site as normal.

    Forum Stats

  • 3,890,393 Users
  • 2,269,776 Discussions
  • 7,916,824 Comments

Discussions

Tool Tip for Interactive Report column data element

SleepDeprivedInSeattle
SleepDeprivedInSeattle Member Posts: 120 Blue Ribbon
edited Mar 25, 2014 1:00AM in APEX Discussions

I have a report which has a column (CURRENT_UNIT). I would like to be able to add a "tool tip". I have done this before using a classic report by the following (borrowed from another APEX example):

Add this CSS

a.rapxxx{

    position:relative;

    z-index:24;

    text-decoration:none}

a.rapxxx:hover{z-index:25; background-color:#ff0}

a.rapxxx span{display: none}

a.rapxxx:hover span{ /*the span will display just on :hover state*/

    display:block;

    position:absolute;

    top:-20px;

    left:20px;

    width:20em;

    border:1px solid darkblue;

    text-align: center;

    background-color:lightyellow;

    color:darkblue;

}

And on the COLUMN FORMATTING, add this:

<a href="#" class="rapxxx">#CURRENT_UNIT#<span>#UNIT_NM#</span></a>

But when I try this on the Interactive Report, I don't get the hover tool tip.  The href displays correctly, I just don't get the value from the span.

Can someone please help me?

Using APEX 4.2.3

Internet Explorer version 9

Thank you

--Seattle

Mathias Magnusson

Best Answer

Answers

  • fac586
    fac586 Senior Technical Architect EdinburghMember Posts: 21,579 Red Diamond
    edited Mar 23, 2014 7:42AM

    You don't say what theme you are using but I was able to reproduce this using theme 25. However, it's probably not theme specific as the CSS rule responsible is the overflow property set on IR data cells in the generic APEX style sheet:

    .apexir_WORKSHEET_DATA td {
      background: #efefef;
      border-top: 1px #fff solid;
      border-bottom: 1px #ccc solid;
      font-size: 12px;
      padding: 3px 9px;
      empty-cells: show !important;
      overflow: hidden;
    }
    
    
    
    

    You therefore need to override this for the required column on your IR page:

    .apexir_WORKSHEET_DATA td[headers*="CURRENT_UNIT"] {
      overflow: visible;
    }
    
    
    
    

    One question: Why this level of complexity instead of utilising the built-in browser behaviour of showing title attributes as tooltips with a basic HTML Expression?

    <span title="<span style="font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;">#UNIT_NM#</span>"><span style="font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;">#CURRENT_UNIT#</span></span>

  • Danny*D
    Danny*D Member Posts: 114 Bronze Badge

    Agree with fac586, seems a bit overkill for a column title/tooltip, my preference is if I can configure, I don't custom code.

    I'd use the Column Link section of the column, give it a URL target of #CURRENT_UNIT#  (or somewhere you need to go with a JS call like javascript:window.location = "http://www.oracle.com";)

    for the tooltip, just set Link Attributes as title=#UNIT_NM#

    Danny*D
  • Salai Kumar
    Salai Kumar Member Posts: 18 Blue Ribbon

    Why not you create one column(e.g. comments) in the select statement which will store the tooltip text and refer that column in the html expression '<span title="#ToolTip#">#COMMENTS#</span> ' - for e.g. if you want tool tip on hovering ename paste the above code under html expression column of ename column attributes .

    Mathias Magnusson
  • fac586
    fac586 Senior Technical Architect EdinburghMember Posts: 21,579 Red Diamond
    edited Mar 24, 2014 4:22AM
    Danny*D201 wrote:
    
    I'd use the Column Link section of the column, give it a URL target of #CURRENT_UNIT#  (or somewhere you need to go with a JS call like javascript:window.location = "http://www.oracle.com";)
    
    

    I wouldn't use a link at all, as there is no real link target in this case. I assume the use of the a element was "borrowed from another [presumably much older] APEX example", dating back to when a was the only element on which Internet Explorer supported the :hover CSS pseudo-class.

    If the CURRENT_UNIT value represents an abbreviation or acronym, then the abbr element should be used instead of the misused a or non-semantic span. Most modern browsers render abbr content so that it is recognisably interactive (e.g. with dotted underlining).

  • Danny*D
    Danny*D Member Posts: 114 Bronze Badge
    Answer ✓

    oh, if column is not a link, just set the URL target to #

This discussion has been closed.