CODEWITHSUNDEEP
jqueryasp.net
Chaitanya
Chaitanya

Reputation: 379

How to combine click and hover function together

Hi all i am doing an example for showing tool tip when hover and click. I found many examples but i choose the below to do

http://ara-abcarians.com/jquery/atooltip/#demos

Now my question i would like to combine both click and hover function together, so that when user click the close icon should be shown if not hide ..

Can any one help me

Upvotes: 1

Views: 5986

Answers (4)

T I
T I

Reputation: 9933

If i understand you correctly, you can just chain functionality on an element/selection so you can do something like

$('p').click(function() {
    alert($(this).text());
}).hover(function(){
    $(this).css('background', 'red');
});

obviously you can adapt this example to suit your needs, to avoid repition you may also consider writing a sperate function and invoking that from within the event, all you would probably have to pass to it would be $(this).

Edit: with a bit more consideration you can do something like this

var bar = $('#bar');

$('#foo').click(function() {
    bar.toggle();    
}).mouseover(function() {
    bar.show();
}).mouseout(function() {
    bar.hide();
});

Edit: A more full implementation of what I believe the OP is requesting demo

var bar = $('#bar');

$('#foo').click(function() {
    $(this).unbind('mouseout');    
}).mouseover(function() {
    bar.show();
}).mouseout(function() {
    bar.hide();
});

$('#close').click(function() {
    $('#foo').bind('mouseout', function() {
        bar.hide();
    });
    $(this).parent().hide();
});

Upvotes: 3

Rickjaah
Rickjaah

Reputation: 591

If I understand correctly in the abscence of a clear description:

Both events will fire same code and must be available at the same time. The events will work against eachother so you have to add a isClicked boolean to your code.

Show the close button only in the onclick event and set isClicked to true in the same event. Hide it again in the onclick of the close button and set isClicked back to false.

Split up your hover event into it's two sub parts (mouseover and mouseout) in the mouseout event, check the isClicked variable and only hide the tooltip if it was not clicked.

Upvotes: 0

Developer
Developer

Reputation: 8636

You should do some thing like 

<script type="text/javascript">   
$(document).ready(function() 
{      
$('#foobar9').bind('mouseover click',function(e) {        
if(e.type == 'click'){         
var close = true        
} 
else 
{        
var close = false        
}});

Or simple solution is

<li><a href="#" class="normalTip clickTip exampleTip" title="Hello, I am aToolTip">Normal Tooltip</a> - This is a normal tooltip with default settings.</li>

Upvotes: -1

Dave Walker
Dave Walker

Reputation: 3523

You can use javascript onmouseover to detect when the mouse is over the element then display the close element. Wire the click event from the close element (that is newly displayed) to complete your click logic.

Upvotes: 0

Related Questions