Tool Tip for Interactive Report column data element

SleepDeprivedInSeattle

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

Danny*D

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

fac586

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

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#

Salai Kumar

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 .

fac586

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

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