APEX-AT-WORK no image

Tooltip der Extraklasse

Von Tobias Arnhold 10.23.2010
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:

































































































ParameterMögliche WerteDefault Beschreibung
headerAny characterblankSpecifies the header text of the caption
bodyAny characterblankSpecifies the body text of the caption
fixedrelxAny integerN/AForces the X-coordinate of the caption to stay fixed (offset is relative to the annotated HTML element)
fixedrelyAny integerN/AForces the Y-coordinate of the caption to stay fixed (offset is relative to the annotated HTML element)
fixedabsxAny integerN/AForces the X-coordinate of the caption to stay fixed (X is an offset relative to the body of the HTML document)
fixedabsyAny integerN/AForces the Y-coordinate of the caption to stay fixed (Y is an offset relative to the body of the HTML document)
windowlockOn / OffOnMake caption stick to side of the window if user moves close to the side of the screen.
cssbodyAny defined style classBuilt in stylesSpecifies CSS class for styles to be used on caption body.
cssheaderAny defined style classBuilt in stylesSpecifies CSS class for styles to be used on caption header.
offsetxAny integer10Horizontal offset, in pixels, of the caption relative to the mouse cursor.
offsetyAny integer10Vertical offset, in pixels, of the caption relative to the mouse cursor.
doubleclickstopOn / OffOnSpecifies whether to halt the caption when the user double clicks on the HTML element with the caption.
singleclickstopOn / OffOffSpecifies 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.
requireclickOn / OffOffSpecifies 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.
hideselectsOn / OffOffSpecifies whether to hide all SELECT boxes on page when popup is activated.
fadeOn / OffOffSpecifies whether to fade tooltip into visibility.
fadespeedNumber between 0 and 10.04Specifies how fast to fade in tooltip.
delayAny integer0Specifies delay in milliseconds before tooltip displays.