How to embed a video into a JQuery tooltip

Im using this plugin clueTip http://plugins.learningjquery.com/cluetip/demo/

See the first example where you hover your pointer over the link and a box pops up. I'd like to embed a youtube video into that instead of showing text.

So how do I put embed code into the title :

 <a class="title" 
href="#" 
title="This is the title|The first set of contents comes after the first delimiter in the title.|In this case, t开发者_JAVA百科he delimiter is a pipe">

This is my first time ever using JQuery so please go easy on me :)

• DEMO: https://so.lucafilosofi.com/how-to-embed-a-video-into-a-jquery-tooltip/

$(function() {
    $('a.title').cluetip({
        splitTitle: '|',
        arrow: true,
        width: '300px',
        height: '300px',
        closePosition: 'title',
        closeText: '<img src="cross.png" alt="" />',
        sticky: true,
        onShow: function(ct, c) {
        /* Everything inside onShow is referred to the <a> so,
         this.href, this.id, this.hash, etc...

        ct & c are reference to the wrapper created 
        by the cluetip plugin.
        ct represent the main container, 
        while c is just the content container
        */
        var src = c.text();
        c.html('<embed ' + 
               'height="200" '+
               'width="200" '+
               'wmode="transparent" '+
               'pluginspage="http://www.adobe.com/go/getflashplayer" '+
               'src="http://www.youtube.com/v/'+src+'" '+
               'type="application/x-shockwave-flash" '+
               '/>');
        }
    });
});

USAGE:

<a class="title" href="#" title="Mass Effect 3 Debut Trailer|BnEej1RfqTs">

Comment Responce

as you said the content is coming from database so you should use AJAX, cluetip have a built-in function for that needs,so read the DOC API.

you should then use ajaxProcess: instead of onShow

• http://plugins.learningjquery.com/cluetip/#options

I would suggest not having your tool-tip source/code within the title if you're wanting it it be more than just plain text.

With jQuery its easy to specify custom tool-tips instead of using a plugin, which would allow you more freedom. by specifying the code for your embeded youtube (or otherwise) video within a div thats hidden by default, you can easily show whatever you like.

Here's an easy way of implementing custom tool-tips with jQuery:

$('.with-tooltip').hover(function() {
$(this).find('.tip').toggle();
});

For the above code you would need a <div class="with-tooltip"></div> to contain a hidden-by-default <div class="tip"></div>, which would contain your video embed code.

I know you've said you're new to jQuery but the rest should be awfully self explanatory, ie: initiating you're jquery code on $(document).ready(function() {...}); etc etc.

Im assuming that just cus you're new to jQuery you're not new to web-design ie: HTML and CSS.

So obviously you would need the appropriate CSS to style your tooltip .tip {...} so that it displays exactly where you want it to etc etc ...

Good Luck

Maybe not a direct answer to your question but take a look at http://www.gettopup.com/

Very nice jQuery tooltip with an example for embedded youtube videos.

Good luck