0

I'm an old (circa 2008) Flash guy, more designer than programmer. Haven't programmed in years.

I'm trying to implement Tooltipster on the site I'm building (it's all html/jQuery), with just one sort of usage, but I need to be able to load the content on-demand so that I don't have a huge initial load...there will be many dozens on a single page; namely a tooltip that you can click links in, and has images and text (and whatever other html), and doesn't disappear until you move out of the content area.

On the Tooltipster homepage, there is info on loading with ajax, but I don't quite understand it.

In simple terms, how can I turn this following code into ajax-load instances? There may be many dozens of these on a single page, as noted. For example, I suppose demo-interact needs to be an html page, as will all other instances, but I'm out of my league here:

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td>      <a href="#"><span id="demo-interact" 
                                title="Try clicking 
                                    &lt;a href='http://google.com/' target='_blank'&gt;
                                        this link
                                    &lt;/a&gt;

                                    &lt;strong&gt;
                                        This text is in bold case!
                                    &lt;/strong&gt;

                                    &lt;img src='spiderman.png'/&gt;
                            ">This</span></a> will hover until you move away from the tooltip itself, i.e. it's clickable</td>
    <td>&nbsp;</td>
  </tr>
</table>

On the project's homepage, it shows how to load html files using ajax, but as I say, it's a bit beyond me. I assume the containing tag needs an ID and that ID would be passed into the function instead of example.php (below),,,or something like that?

$('.tooltip').tooltipster({
    content: 'Loading...',
    functionBefore: function(origin, continueTooltip) {

        // we'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
        continueTooltip();

        // next, we want to check if our data has already been cached
        if (origin.data('ajax') !== 'cached') {
            $.ajax({
                type: 'POST',
                url: 'example.php',
                success: function(data) {
                    // update our tooltip content with our returned data and cache it
                    origin.tooltipster('content', data).data('ajax', 'cached');
                }
            });
        }
    }
});

It all comes from here: http://iamceege.github.io/tooltipster/#demos

Any help would be appreciated:)

Shawn

Ahmad Ibrahim
  • 1,915
  • 2
  • 15
  • 32
sgibson
  • 23
  • 1
  • 4
  • Do you have a webserver installed which responds to `example.php`? – Christoph Werner Feb 20 '15 at 23:13
  • I have server space at Internic.ca, which allows php, but right now I'm working on a localhost, and don't plan on using any php. And I'm using WampServer64 locally, so I have php here, too. But again, I don't plan, at this stage, to use anything but jquery/ajax/xml. – sgibson Feb 20 '15 at 23:27
  • AJAX is a concept to communicate with a server asynchronously. This means, that the site doesn't needs to reload while you can interact with the server over HTTP. Loading the `example.php` from the local filesystem might not work depending on the browser. – Christoph Werner Feb 21 '15 at 00:21

3 Answers3

2

I know the question is old, but I found a working example, because I got the same problem here.

Try to use this example. It work not really because of XHS restrictions or however this called.

$('#test').tooltipster({
  content: 'Loading...',
  contentAsHTML: true,
  /*optional - I used it in my case*/
  functionBefore: function(origin, continueTooltip) {

    continueTooltip();

    if (origin.data('ajax') !== 'cached') {
      $.ajax({
        type: 'POST',
        url: 'http://evolution.uni-giessen.de:8080/example/example.php',
        data: {
          somevar: "some content"
        },
        success: function(data) {
          origin.tooltipster('update', data).data('ajax ', 'cached');
        }
      });
    }
  }

});
<link href="http://evolution.uni-giessen.de:8080/example/tooltipster.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://evolution.uni-giessen.de:8080/example/jquery.tooltipster.js"></script>


<a id="test" title="a title">ein Test</a>

If there are some optimization about my posting style feel free to comment it.

Allan Karlson
  • 453
  • 11
  • 23
1

If I understand correctly, your problem is that the tooltip does not show in an ajax loaded content, correct? If so, you need to initialize tooltipster in said ajax callback.

For example, you'd only need to use $('.tooltip').tooltipster(); to make it all work, but if you're making an ajax call, then do something like:

$.ajax({
    url: '/url/goes/here',
    ...
}).done(function() {
    // this is the callback, you can initialize tooltipster here
    $('.tooltip').tooltipster();

    // and now it should work with the ajax loaded stuff as well
});
Asko
  • 11
  • 2
  • I haven't even got that far yet. Let's say I have tooltip1.html, tooltip2.html, etc. and I only want to load them into a tooltipster plugin (somewhere in the above table) when someone actually hovers over it...knowing there will be tooltip(x).html pages (many of them). You code sort of makes sense to me, but it's a few levels beyond what I understand. Let me putz around in Dreamweaver and maybe I can get it to sort of work and ask more cogent questions lol. Shawn – sgibson Feb 20 '15 at 23:15
0

I don't know tooltipster, but Asko's answer looks plausible. But another thing: $('.tooltip') is a jQuery object representing all HTML elements with CSS class tooltip, but I don't see any such elements in your HTML. Maybe you meant to do $('#demo-interact') - this would represent the <span id="demo-interact"> element. ($ accepts a CSS selector as an argument.)

David Knipe
  • 3,417
  • 1
  • 19
  • 19
  • I don't see anything in your HTML or javascript that looks like it might tell tooltipster which element(s) should have the `tooltip` class. But if you're using Firebug you can check by entering `.tooltip` under Selectors in the CSS tab. – David Knipe Feb 21 '15 at 00:20