I've put together subsequent code to show up dynamic content coming from an AJAX call.

The call as well as showing up the tooltip works but the trigger mechanism is a bit weird.

My aim it to

a) show the tooltip when clicking the DIV container and 

b) to close the tooltip once I leave the DIV container

But what actually happens is:

c) When I click nothing happens and 

d) when I then move over the DIV container the tooltip appears (every time I move over the container)

Does anybody know how to correct my code in order to achieve a and b?

Best Regards,

Stefan

2. <script type="text/javascript">
3.     $('document').ready(function() {
4.         
5.         $('.ajax').click(function() {
6.             
7.             // Fetch the game id from id attribute
8.             var thisSelector = $(this);
9.             var gameId = $(this).attr("id");
10.             $.ajax({
11.                 type: "GET",
12.                 url: "http://server:8080/games/"
13.                         + gameId,
14.                 dataType: 'jsonp',
15.                 jsonpCallback: "fn",
16.                 crossDomain: true,
17.                 success: function(data) {
18.                     
19.                     $( thisSelector ).tooltip({ 
20.                         open: function( event, ui ) {
21.                             console.log("c");
22.                         },
23.                         content: function() {
24.                             return '<span id="msg" STYLE="font-size: 10pt"><center><img src="images/pic.png" border="4" alt="some_text"></center><br>' + parseJSON(data) + '</span>';
25.                         }
26.                     });
27.                     
28.                 },
29.                 error: function(jqXHR, textStatus, errorThrown) {
30.                     console.log('error');
31.                     console.log(errorThrown);
32.                     console.log(jqXHR);
33.                 }
34.             });                     
35.         });