Tooltip der Extraklasse

Ich hatte ja vor nicht allzu langer Zeit schon erwähnt das ich ne Tooltip Anwendung erstellen wollte. Leider hat es die Zeit nicht ganz zugelassen.

Seit APEX 4.0 sind die Tooltips ja eh dynamisch und eigentlich brauch jetzt niemand mehr ne Speziallösung! Eigentlich...

Es gibt eine Tooltip Art die APEX noch nicht von Haus aus unterstützt: Moveover-Tooltips
Anzeige einer Infobox wenn ich mich über dem Item befinde.

Beispiel: http://www.ta-it-consulting.de/tooltip_example.html

Die Lösung basiert auf dem Quellcode von Swazz mit ihrem Tooltip Plugin: Boxover.
Paulo Vale schrieb bereits über die Integration dieses Tooltips. Damit auch die Deutsche Community dran teilhaben darf, dachte ich mir, ich erweitere die Anleitung und zeige was alles möglich ist.
Leider ist die offizielle Beispielseite nicht mehr Online. Die Javascript Datei könnt ihr hier runterladen: http://ta-it-consulting.de/boxover_tooltip.js

1. Installation - HTML Header:

<!-- TOOLTIP START -->
// Source code
<script type="text/javascript" src="#APP_IMAGES#boxover_tooltip.js"></script>

// Erweitertes Layout
<style type="text/css">
.hlpHeader{font-weight:bold;width:320px;font-family:arial;border:1px solid #6F6F6F;padding:3;fontsize:11;
color:#FFFFFF;background:#8F8F8F;filter:alpha(opacity=85);opacity:0.85;
}

.hlpBody{width:320px;font-family:arial;border-bottom:1px solid #6F6F6F;border-left:1px solid #6F6F6F;
border-right:1px solid #6F6F6F;padding:3;fontsize:11;color:#FFFFFF;background:#BFBFBF;filter:alpha(opacity=85);
opacity:0.85;
}
</style>
<!-- TOOLTIP END     -->

2. Konfiguration - Item > HTML Form Element Attributes:

Beispiel 1:
TITLE="header=[Information] body=[Hilfetext fuer dieses Item]"

Beispiel 2:
TITLE="cssbody=[hlpBody] cssheader=[hlpHeader] header=[Information] body=[Hilfetext]"

Beispiel 3:
TITLE="fixedrelx=[1] fixedrely=[-56] header=[Information] body=[Hilfetext]"

Anleitung:
http://opatia.com/js/BoxOverParameters.htm

Einstellungsmöglichkeiten:

Parameter	Mögliche Werte	Default	Beschreibung
header	Any character	blank	Specifies the header text of the caption
body	Any character	blank	Specifies the body text of the caption
fixedrelx	Any integer	N/A	Forces the X-coordinate of the caption to stay fixed (offset is relative to the annotated HTML element)
fixedrely	Any integer	N/A	Forces the Y-coordinate of the caption to stay fixed (offset is relative to the annotated HTML element)
fixedabsx	Any integer	N/A	Forces the X-coordinate of the caption to stay fixed (X is an offset relative to the body of the HTML document)
fixedabsy	Any integer	N/A	Forces the Y-coordinate of the caption to stay fixed (Y is an offset relative to the body of the HTML document)
windowlock	On / Off	On	Make caption stick to side of the window if user moves close to the side of the screen.
cssbody	Any defined style class	Built in styles	Specifies CSS class for styles to be used on caption body.
cssheader	Any defined style class	Built in styles	Specifies CSS class for styles to be used on caption header.
offsetx	Any integer	10	Horizontal offset, in pixels, of the caption relative to the mouse cursor.
offsety	Any integer	10	Vertical offset, in pixels, of the caption relative to the mouse cursor.
doubleclickstop	On / Off	On	Specifies whether to halt the caption when the user double clicks on the HTML element with the caption.
singleclickstop	On / Off	Off	Specifies whether to halt the caption when the user single clicks on the HTML element with the caption. - if both singleclickstop and doubleclickstop are set to "on", singleslclickstop takes preference.
requireclick	On / Off	Off	Specifies whether the user must first click the element before a tooltip appears. Intended for use on links so that information appears while the link is followed.
hideselects	On / Off	Off	Specifies whether to hide all SELECT boxes on page when popup is activated.
fade	On / Off	Off	Specifies whether to fade tooltip into visibility.
fadespeed	Number between 0 and 1	0.04	Specifies how fast to fade in tooltip.
delay	Any integer	0	Specifies delay in milliseconds before tooltip displays.

Post Tags:

APEX examples Tooltip