top



How can I create a dialog box like this WD that will do the same work as here ?

Thank you in advance Smile

Dialog box? Err :/

take your mouse over the logo... A Dialog box will appear saying "World Design" I want to create that...

Oh, you mean a tooltip?
This is a different version but it gives you the same effect.
http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/

Yeah But How will I apply this java to all of my forum ?

If you don't even know what it is, I suggest you to leave it..

Can't I add tooltips like here ? If you point with your mouse to a members life a dialog box will pop up saying "You Have No Warnings"

How can I do it ?

By googling <.<

You need the CSS code first

css code:

Code:

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

Then put this on overall_header (after )
Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

Then use this code

Code:

<a href="#" class="tip_trigger">Your Link Key Word <span class="tip">This will show up in the tooltip</span></a>

Just Test them

jQuery is alredy appended to Forumotion. You do though, need to host the tooltip script!

Code:
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});

i forgot add it LOL

It is not working :( Oh my god... I want it so much :( Or I am making a mistake :(

Sorry... Please help me...

thanks

Dude, we are helping you. Post your forum link in this topic.

Well sorry for not understanding... Ok Can you tell me from the beggining how to add jquery tooltips ?

Damnsauce!
Let's do it the easy way Happy
Paste the whole load into the homepage message:

Code:
<script>
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});
</script>
<style>

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
</style>


    <a href="#" class="tip_trigger">Your Link Key Word <span class="tip">This will show up in the tooltip</span></a>

As requested, moved

Uhhm.. It does not work... :( it does not display a tooltip... :( xD

Replace $ with jQuery

It works !!! SOLVED !!!

Solved & Locked

Hope i dont see a wd copy my friend Wink

Locked