Create Pop-Up Hints with PHP

Use the overLIB library to pop up hints for words on your web page using JavaScript and PHP.

With the overLIB JavaScript library , you can have handy pop-up labels that appear above text on your page. This hack makes it a little easier to create these links by providing a PHP wrapper function to invoke the library.

Complete Code

Save the code shown as pop-up.php.

A wrapper function that simplifies overLIB use, courtesy of PHP

<?php
function popup( $text, $popup )
{
?>
<a href="javascript:void(0);" onmouseover="return overlib('<?php echo($popup); ?>
');" onmouseout="return nd();"><?php echo($text); ?></a>
<?php
}
?>
<html>
<head>
<script type="text/javascript" src="overlib/overlib.js"><!-- overLIB (c) Erik Bosrup -->
</script>
</head>
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;">
</div>
With PHP, we can combine with some javascript to make small popups. <br />Just hover your mouse on <?php popup(
'me', 'And this is The Hover Text.<br/>Looking Wonderfull ha?.'
); ?>. It's work ^_*.
</body>
</html>

You could also put the wrapper function into a PHP library, include that library in your PHP pages, and turn this into a nice, reusable utility function.

Test Your Code

Download and unpack the overLIB library into your web server’s documents directory. Then add in the pop-up.php file and test it on your browser, You should see something similar

PHP Popups Screen shoot 1

Next, move the mouse over the word me, and you will see the pop up appear, which gives you a little more information about me

PHP Popups Screen shoot 2

This pop up can be as elaborate as you like, with images, tables, different fonts, styles, and whatever else you want it.

8 thoughts on “Create Pop-Up Hints with PHP

  1. Permalink  ⋅ Balas

    Ramzi

    Agustus 15, 2012 at 10:27pm

    Mohon tutorial lainnya juga pak, soalnya php tu banyak banget dan agak rumit menurut saya
    terima kasih

  2. Permalink  ⋅ Balas

    milin

    Maret 19, 2010 at 2:32am

    Download and unpack the overLIB library into your web server’s documents directory.

  3. Permalink  ⋅ Balas

    Kamal

    Februari 13, 2010 at 11:48am

    That’s right Sergey, we can use that, but sometimes we need add more complex code and we can do that with PHP that I post in this tutorial

  4. Permalink  ⋅ Balas

    johnix

    Juli 23, 2009 at 6:22am

    Sergey, that’s just a title attribute which only shows for a second or two. If you need longer tips, you need one that stays there until you’re finished reading it.

    This code does that.

    The only thing that it isn’t very useful for are php/javascript pages you’ve already built and you want to add these tips to existing links.

    You have to totally recode your site to use this.

  5. Permalink  ⋅ Balas

    just-me

    Desember 31, 2008 at 1:21pm

    <a href=”javascript:void(0);” onmouseover=”return overlib(‘
    ‘);” onmouseout=”return nd();”>

    With PHP, we can combine with some javascript to make small popups. Just hover your mouse on <?php popup(
    ‘me’, ‘And this is The Hover Text.Looking Wonderfull ha?.’
    ); ?>. It’s work ^_*.

  6. Permalink  ⋅ Balas

    Sergey Koulik

    Agustus 14, 2007 at 7:09am


    With PHP, we can combine with some javascript to make small popups. Just hover your mouse on me.

    Why do things harder they are?..

    • Permalink  ⋅ Balas

      Jauhari

      Agustus 14, 2007 at 7:59am

      That’s right Sergey, we can use that, but sometimes we need add more complex code and we can do that with PHP that I post in this tutorial ;)

Tinggalkan Balasan

Your email will not be published. Name and Email fields are required.

Anda dapat menggunakan tag dan atribut HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>