Close tooltip by clicking button inside tooltip Created Sep 14, 2009

This works as expected. If you use the api variable your close action should go like this:

api.hide();

without api you seem to have the right action. Please read this for more details:

http://flowplayer.org/tools/using.html#api

I've already read that but it doesn't give me enlightment

var api = $(".trigger").tooltip({
    tip: '.tooltip',
    effect: 'fade',
    fadeOutSpeed: 100,
    predelay: 400,
    delay: 400,
    position: "bottom right",
    offset: [-35, 10],
    api: true
});

function CloseTooltip(Obj) {
    api.hide();
    return false;
}

api is undefined
CloseTooltip(a.close Search?sea...advanced=#)tooltip.js (?????? 13)
function onclick(event) { CloseTooltip(this); return false; }(click clientX=400, clientY=306)Search?s...ent/seq/1 (line  2)
[Break on this error] api.hide();
tooltip.js (line 13)

I have multiple tooltips and multiple triggers if it matters

here are the principles for making this working:

// select all buttons inside the tooltip
$(".tooltip button").click(function() {	

  // find the api in relation to the tooltip and call hide()	    
  $(this).parent().prev().tooltip().hide();			
});

so the logic is to find trigger and access its tooltip api

My trigger is not right before tooltip

I found it for sure by

$("a.close").click(function() {
$(this).parents(".translation").find(".trigger").css("border", "10px solid red");
}); 

changed to

$("a.close").click(function() {
$(this).parents(".translation").find(".trigger").tooltip().hide();
});

but all I get is

$(this).parents(".translation").find(".trigger").tooltip is not a function
[Break on this error] $(this).parents(".translation").find(".trigger").tooltip().hide();

you have initialized your tooltips before this call, right? also. are you using the latest version? May I see a live demo?

that's interesting. when I created a separate page with only tooltip everything worked fine.

So I guess the promblem is in conflicting few JS-files that i have

Thanks a lot for help :)

Made it working, but now there's another problem

api.hide() does it with default delay settings - if I set delay: 10000 then after clicking close button tooltip doesn't close instantly

tried this but it doesn't help

$("a.close").click(function() {
    $(this).parents(".translation").find(".trigger").tooltip({ fadeOutSpeed: 10, delay: 0, api: true}).hide();
});

Thank you for this. This is now fixed on the upcoming release. Try to push it out today.

HI
I am from Taiwan sorry English is not good
To resolve this issue do?
And there can refer to practical examples do
Because I also want a similar effect ^^

.trigger {
}
.tooltip {
	background:transparent url(../img/ballon5.gif) no-repeat scroll 0 0;
	width:235px;
	height:128px;
	padding-bottom: 5px;
	display:none;
	z-index: 100;
	color: #666666;
	position: absolute;
	font-size: 13px;
}
.tooltip .close {
    float: right;
    margin: 10px 6px 0 0;
    cursor: pointer;
}
.tooltip p {
    margin: 0 15px 0 45px;
	font-size:13px;
}

<div class="tooltip">
	<img src="/Content/img/close2.gif" class="close" />
	<p>some text</p>
	<p>some text</p>
	<p>some text</p>
</div>

var api = $(".trigger").tooltip({
    tip: '.tooltip',
    effect: 'fade',
    fadeOutSpeed: 100,
    predelay: 400,
    delay: 100,
    position: "bottom right",
    offset: [-35, 10],
    api: true
});

$("img.close").click(function() {
    $(this).parents(".translation").find(".trigger").tooltip().hide();
});

Have you an example of the above
I understand that
Thank you Aramaki ^^

Didn't understand your "Have you an example of the above" but you're welcome ^_^

Newbie here.

So can I create a tooltip with a close button and still use the title tag for supplying the content?

Okay, I've almost got this working (thanks, by the way for posting this, it's almost exactly what I've been looking for and has been a great help).

I've got the functionality as described. I have the tooltip displaying when I click the trigger, and I have the tooltip hiding when I click a 'close' link.

The only trouble is that when I click on the trigger a second time nothing happens.

Here's my code.

<div class="mod-side">
    <label class="favourite-supplier">
        Favourite</label>
    <a class="supplier-help">Helper</a>
    <div class="tooltip">
        <a class="close-tooltip">Close</a>
        <h4>
            LexisNexis Butterworths</h4>
        Offers world-class content, information analytics and workflow solutions for professionals
        in the legal, and corporate markets.
    </div>
</div>

My tooltip trigger is

 
<a class="supplier-help">Helper</a>

$(document).ready(function(){
    // initialize tooltip
    $('.mod-side a.supplier-help')
        .tooltip({
            position: 'bottom right',
            events: {def: "mouseover, ''",tooltip: "'',''"}})
        .dynamic({
            top: { direction: 'up' } 
    });
        
    $('a.close-tooltip').click(function() { 
        $(this).parent().hide();
    });
    
    $('.mod-side a.supplier-help').click(function() {
        alert('!!!');
    });
});

The extra javascript below has been added to prove to myslef that normal onclick events will still fire.

$('.mod-side a.supplier-help').click(function() {
        alert('!!!');

Does anybody have any ideas? Any help much appreciated.

Douglas.

Actually it looks like I've managed to fix it. I needed to add another click event on the trigger to 'show' the tooltip manually, in order to override the 'hide' tooltip.

Here's the javascript I ended up with:

$(document).ready(function(){
    // initialize tooltip
    $('.mod-side a.supplier-help')
        .tooltip({
            position: 'bottom right',
            events: {
                def: "click, ''",
                tooltip: "'','mouseout'"},
            onShow: function(){
               var tip = this.getTip();
               tip.show();
            }
        })
        .dynamic({
            top: { direction: 'up' } 
    });
        
    $('a.close-tooltip').click(function() { 
        $(this).parent().hide();        
    });
    
    $('a.supplier-help').click(function() { 
        $(this).next().show();
    });
});