make tooltip mostrar al hacer clic y agregarle un modal

Question

curiosamente, encuentro difícil vincular el controlador de evento onclick de jquery a este violín. Ni siquiera sé lo que estoy haciendo mal. El HTML es el siguiente: -

<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>​ 

estilo de esta manera: -

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

con jQuery así: -

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

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

que echa un vistazo a la página de violín creé: - http://jsfiddle.net/UyZnb/339/.

De nuevo, ¿cómo implemento una apariencia modal tipo jquery para que la información sobre herramientas se convierta en el foco?

Answer 1

de Trabajo de demostración: el uso del ratón sobre y fuera: http://jsfiddle.net/swxzp/o usando clic http://jsfiddle.net/rjGeS/ (He escrito una pequeña demostración jQuery/Css/Opacidad)

Actualización: muestra de trabajo con el gatillo 1, 2 & 3: http://jsfiddle.net/HeJqg/

como funciona:

tiene 2 divs es decir background w Esto se usa para hacer que la página de reposo se vuelva gris-ish como modal y la segunda div large que actuará como un marcador de posición para la información sobre herramientas para que pueda cerrarla y abrirla en cualquier evento que desee aunque el fondo sea gris.

Resto siente libre de jugar con el código, creo que sirve la causa :)

Código

$('.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>​ 

imagen de demostración de trabajo: