Rückmeldung geben

[dedlfix]

Tach!

Um unseren Lesern die Möglichkeit zu geben, die Sortierung und den Thread-Ausklapp-Status als Voreinstellung abzulegen, lege ich Werte im Local Storage (Web Storage API) ab. Das ist aber nicht das eigentliche Thema. Es geht mir darum, dem Nutzer ein Feedback zu geben, wenn die Speicherung erfolgt ist. Oder allgemein gesagt: Nutzer klickt etwas, System tut etwas und sagt dann: Habs gemacht. Mein Problem dabei ist, mir fällt grad nichts gescheites ein, wie das "Habs gemacht" aussehen könnte. Ein alert() wäre eine Möglichkeit, das muss aber aktiv weggeklickt werden, was ich nicht so toll finde. Besser wäre so etwas wie ein jQuery Tooltip, den ich aktiv einblende und nach kurzer Zeit wieder ausblende. Dazu müsste ich aber weitere 22KB jQuery-UI einbinden, was ich etwas zu heftig für den kleinen Tooltip finde. Was gibts für Alternativen? Tooltip ist übrigens nicht die richtige Bezeichnung für das gesuchte Element, es soll eher eine Messagebox ohne Schnickschnack sein. Der Tooltip soll nur zeigen, wie ich mir das optisch vorstelle.

dedlfix.

[Christian Kruse]

Moin dedlfix,

du kannst den Tooltip doch recht einfach nachbilden. Einen absolut positionierten <div> in den DOM einhängen (den du sogar via Klasse stylen könntest), einblenden via fadeIn() und dann nach einem Timeout von z.B. 5 Sekunden wieder Ausblenden und aus dem DOM entfernen. jQuery wird doch schon geladen.

LG,
 CK

[dedlfix]

Tach!

du kannst den Tooltip doch recht einfach nachbilden. Einen absolut positionierten <div> in den DOM einhängen (den du sogar via Klasse stylen könntest), einblenden via fadeIn() und dann nach einem Timeout von z.B. 5 Sekunden wieder Ausblenden und aus dem DOM entfernen. jQuery wird doch schon geladen.

Das war zu einfach. Ich hatte mit mehr Problemen gerechnet, weil mir mal ein Kalender schmerzen bereitete, der durch ein Element in einer Seitenleiste eingeblendet werden sollte und dann halb im Seitenrest verschwand, ohne dass er on top kommen wollte. Aber in dem Fall hab ich ja nur "flaches Land" vorliegen.

Das ist der Javascript-Teil:

$('#ContainerVomKlickElement').after('<div id="message" class="tooltip">Erledigt.</div>');  
  
$('#KlickElement').click(function () {  
  var pos = $(this).position();  
    $('#message').css({  
      top: (pos.top + $(this).height()) + 'px',  
      left: pos.left + 'px'  
    }).fadeIn(300).delay(2000).fadeOut(300);  
});

und das CSS:

.tooltip {  
  position: absolute;  
  z-index: 10;  
  display: none;  
  /* plus styling */  
}  

dedlfix.