Activate tooltip using onclick jQuery
I'm testing a tooltip plugin and it will display a tooltip on mouseover. I'm trying to make the tooltip appear with an onclick, which I'm struggling and need your help.
I'm currently using a jquery piece so it will activate a modal window, thanks to @pointy, when the links within the tooltip is clicked. Can something like this be included with jQuery?
Demo: http://jsbin.com/eliwa3
Here is the page code that calls the functionality and tooltip content
<script>
dw_Tooltip.defaultProps = {
sticky: true,
klass: 'tooltip',
showCloseBox: true,
klass: 'tooltip2', // class to be used for tooltips
closeBoxImage: 'http://www.google.com/apps/images/x.png',
wrapFn: dw_Tooltip.wrapSticky
};
dw_Tooltip.on_show = function() {
$(".modalPageWide").colorbox({
width:"800px",height:"610px",opacity:0.6,iframe:true
})
};
dw_Tooltip.content_vars = {
tooltip_popup: {
content: 'Click a link to continue' +
'<ul><li>开发者_如何学Python<a href="http://www.amazon.com" class="modalPageWide">Link 1</a></li>' +
'<li><a href="http://www.amazon.com" class="modalPageWide">Link 2</a></li>' +
'<li><a href="http://www.amazon.com" class="modalPageWide">Link 3</a></li>' +
'<li><a href="http://www.amazon.com" class="modalPageWide">Link 4</a></li></ul>',
klass: 'tip'
}
}
</script>
As shown below, when a link includes a reserved class "showTip", it will activate the tooltip on mouseover. Also included is a compound class (of my choice) that will call the tooltip content
<a href="#" class="showTip tooltip_popup">Example</a>
Here's the logic that makes the tooltip work: Tooltip logic
basically all you would need to do it something like
$('a.tooltip_popup').click(function(e){
e.preventDefault();//so link doesn't take you to where ever it's supposed to
//code that brings the tooltip up
});
精彩评论