Egyre több weboldalon lehet látni olyan megoldásokat, amelyek a JavaScript által biztosított alert függvény kiváltására szolgálnak.

A megoldandó feladat a következő: PHP oldalon kiírunk egy üzenetet, amelyet JavaScript oldalról felolvasunk és egy kultúráltabb formában megjelenítünk. Nézzük mi kell a feladat megoldásához.

1. HTML

 <div class="tooltip"> 
	<h3>Figyelem!</h3> 
	<p id="tooltip_text"><?=(isset($message)) ? $message : ''?></p> 
 </div>

2. CSS 

.tooltip { 

    display:none; 
    background:url(http://static.flowplayer.org/tools/img/tooltip/black_big.png); 
    height:145px; 
    padding:40px 30px 10px 30px; 
    width:310px; 
    font-size:14px; 
    color:#fff; 
}

.tooltip h3 {

    font-size: 20px;
    margin-bottom: 10px;

}  

 3. PHP - csak egy kódrészlet, ezesetben CodeIgniter alapon, amely egy változót átad a fenti templatenek

<?php
....
$output['message'] = "Az e-mail elküldve!";
$this->load->view('web/demo_template',$output);
....
?>

 4. JavaScript - a jQuery-re épülő jQuery Tools -t használjuk erre a feladatra

A kód a következőképpen működik: A tooltip_text id-jú <p> tagben lévő szöveg hosszát vizsgálja. Amennyiben van benne szöveg, PHP oldalról átadtuk a templatenek, akkor a jQuery Tools -ból ismerős tooltipet megjeleníti az átadott üzenettel. A JavaScript kódot, egy globálisan elérhető js file-ba érdemes tenni, hogy az egész oldalunkon egységes értesítést tudjunk használni.

A jQuery Tools-ban lévő tooltip úgy működik, hogy eg DOM elemre "ráakaszthatjuk" a tooltip megjelenítését, vagyis ha a megadott DOM elem fölé húzzuk az egeret (onmouseover) akkor megjelenik a tooltip. Számunkra ez a megoldás csak félmegoldás, így lássuk mit tehetünk. A logika az, hogy a PHP oldalról átadott üzenetet felhasználói beavatkozás nélkül kell megjelenítenünk. 1. lépésként beállítjuk valamelyik DOM elemre a tooltip megjelenítést, majd egy timer programozásával megjelenítjük azt. Amint megjelent a tooltip-ünk (buborék), elindítunk még egy timert, ami 4 mp múlva elrejti az üzenetet, és kitörli a DOM elemből, így elkerülhetjük, hogy átkattintással mégegyszer megjelenjen egy buborék üzenet, amely az adott aloldalra már nem lesz releváns.

Nézzük a kódot egyben.

if($('#tooltip_text').html().length > 0) {
    //beállítjuk a tooltip (buborék) tulajdonságait
     $(".innermiddle_head").tooltip({
        position: ['top', 'center'],
        effect: 'slide'
    });
    //Egy timer meghívásával fél mp elteltével megjelenítjük a buborékot
    setTimeout(function(){
      //végrehajtuk programozottan a tooltip megjelenítését
      $(".innermiddle_head").trigger('mouseover');
      //elindítunk egy másik timert, amely 4 mp múlva törli az üzenet szövegét, majd lecsatolja az eseményfigyelést
      setTimeout(function(){
        $(".innermiddle_head").trigger('mouseout');
        $(".innermiddle_head").unbind('mouseover');
        $('#tooltip_text').empty();
      },4000);
    },4000);
}

Mindezt a megjelenést CSS-ből saját kedvünkre formázhatjuk, amennyiben nem tetszik a jQuery Tools által biztosított megjelenés.

Demó oldal