make tooltip display on click and add a modal to it

Question

strangely, I find it difficult to bind jquery's onclick event handler to this fiddle. I don't even know what I'm doing wrong. The html is as follows:-

<ul>
    <li><a id="tooltip_1" href="#" class="tooltip" >Trigger1</a><li>
    <li><a id="tooltip_2" href="#" class="tooltip" >Trigger2</a><li>
    <li><a id="tooltip_3" href="#" class="tooltip" >Trigger3</a><li>
</ul>

<div style="display: none;">
    <div id="data_tooltip_1">
        data_tooltip_1: You can hover over and interacte with me
    </div>
    <div id="data_tooltip_2">
        data_tooltip_2: You can hover over and interacte with me
    </div>
    <div id="data_tooltip_3">
        data_tooltip_3: You can hover over and interacte with me
    </div>
</div>​

styled this way:-

li { 
    padding: 20px 0px 0px 20px;
}​

with a jquery like this:-

$(document).ready(function() {
    $('.tooltip[id^="tooltip_"]').each

        (function(){
        $(this).qtip({
            content: $('#data_' + $(this).attr('id')),
                show: {
            },
            hide: {
                fixed: true,
                delay: 180
            }
        });
    });
});​

you check out the fiddle page I created:- http://jsfiddle.net/UyZnb/339/.

Again, how do I implement a jquery modal-like appearance to it so the tooltip becomes the focus?

Answer 1

Working Demo: using mouse over and out: http://jsfiddle.net/swxzp/ or using click http://jsfiddle.net/rjGeS/ ( I have written a small JQuery/ Css / Opacity demo)

Update: Working sample with trigger 1, 2 & 3: http://jsfiddle.net/HeJqg/

How it works:

It has 2 divs i.e. background which is used to make rest page become grey-ish like modal and second div large which will act as a placeholder for the toolTip so thta you can close and open it in any event you want even though the background is grey.

Rest feel free to play around with the code, hope it helps the cause :)

Code

$('.tooltip_display').click(function() {
    var $this = $(this);
    $("#background").css({
        "opacity": "0.3"
    }).fadeIn("slow");


    $("#large").html(function() {
        $('.ttip').css({
            left: $this.position() + '20px',
            top: $this.position() + '50px'
        }).show(500)

    }).fadeIn("slow");


});

$('.note').on('click', function() {
    $('.ttip').hide(500);
    $("#background").fadeOut("slow");
    $("#large").fadeOut("slow");

});
$("#large").click(function() {
    $(this).fadeOut();

});​

CSS

.ttip {
    position: absolute;
    width: 350px;
    height: 100px;
    color: #fff;
    padding: 20px;
    -webkit-box-shadow: 0 1px 2px #303030;
    -moz-box-shadow: 0 1px 2px #303030;
    box-shadow: 0 1px 2px #303030;
    border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    -webkit-border-radius: 8px 8px 8px 8px;
    -o-border-radius: 8px 8px 8px 8px;
    background-image:-moz-linear-gradient(top, #F45000, #FF8000);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F45000), to(#FF8000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F45000', endColorstr='#FF8000', GradientType=0);
    background-color:#000;
    display: none
}
.contents {
    font-size: 15px;
    font-weight:bold
}
.note {
    font-size: 13px;
    text-align:center;
    display:block;
    width: 100%
}
#background{
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    z-index: 1;
}
#large {
    display: none;
    position: absolute;
    background: #FFFFFF;
    padding: 0px;
    z-index: 10;
    min-height: 0px;
    min-width: 0px;
    color: #336699;
}​

HTML

<span class="tooltip_display">Trigger</span>
<div id="large">
<div class="ttip">
  <div class="contents">Here goes contents...</div>
  <span class="note">(click here to close the box)</span> 
</div>
</div>
<div id="background"></div>​

Image of working demo: