Geek asks and answers

How to embed a video in a jQuery tooltip

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

See the first example where you hover over a link and a window appears. I would like to include a YouTube video in it, and not show the text.

So, how do I insert code in the header:

 <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, the delimiter is a pipe">

This is my first time using jQuery, so please come to me :)

+3
source share
3 answers
$(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" '+
               '/>');
        }
    });
});

APPLICATION:

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

Reply response

as you said, the content comes from the database, so you have to use AJAX, cluetip has a built-in function for this, so read the DOC API.

ajaxProcess: onShow

+3

, / , , , .

jQuery , , . youtube ( ) div, , , .

jQuery:

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

<div class="with-tooltip"></div>, <div class="tip"></div>, .

, , jQuery, , : jquery $(document).ready(function() {...}); .. ..

Im, , cus jQuery, -, : HTML CSS.

, , CSS .tip {...}, , .. .....

+2

Perhaps not a direct answer to your question, but see http://www.gettopup.com/

A very good jQuery hint with an example for youtube embedded videos.

Good luck.

0
source

More articles:


All Articles