Für ein paar meiner Reports habe ich bisher Boxover verwendet, um Details in einem Tooltip darzustellen.
Da ich für andere Zwecke immer öfter auf jQuery und dessen Plugins zurückgreife, wollte ich nun Boxover gegen ein solches von jQuery austauschen. Somit ist die Pflege von JavaScript-Frameworks weniger aufwendig.
Gefunden habe ich clueTip, welches meine Wünsche erfüllt und noch ein paar weitere Features enthält. Die Downloads befinden sich hinter den erwähnten Links.
Wir benötigen grundsätzlich immer die „jquery-versionx.js“ und für dieses Beispiel zusätzlich die „jquery.cluetip.js“ sowie die dazu passende „jquery.cluetip.css“ Datei.
Folgenden Code packen wir wie schon gewohnt in den Header der entsprechenden Seite, oder direkt in das Page-Template, falls wir das Plugin auf mehreren Seiten einsetzen möchten.
<script src="#WORKSPACE_IMAGES#jquery-1.2.6.min.js" type="text/javascript"></script> <script src="#WORKSPACE_IMAGES#jquery.cluetip.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$().ready(function()
{
$('a.title').cluetip({splitTitle: '|', tracking: true});
});
// --></script>
Um den Tooltip in einem Report darzustellen, könnte das SELECT wie folgt aussehen:
SELECT id, '<a class="title" title="' || titel || '|' || description || '" href="#">' || titel || '</a>' as Details FROM my_table
Der Wert in der Spalte wird mit dem Class-Tag „title“ dem clueTip-Plugin bekannt gemacht. Der eigentliche Text erscheint in „title“, wo der Header und Inhalt durch den Trennstrich „|“ markiert werden. Der Parameter „tracking: true“ bewirkt, dass der Tooltip dem Mauszeiger folgt, solange dieser über dem Text ist.
So könnte es dann aussehen:
clueTip
