jquery - 如何将视频嵌入到 JQuery 工具提示中

Question

我正在使用这个插件线索提示 http://plugins.learningjquery.com/cluetip/demo/

请参阅第一个示例，其中将指针悬停在链接上并弹出一个框。我想在其中嵌入 YouTube 视频而不是显示文本。

那么如何将嵌入代码放入标题中:

 <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">

这是我第一次使用 JQuery，所以请放轻松:)

Answer 1

• 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" '+
               '/>');
        }
    });
});

用法:

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

评论回复

正如您所说，内容来自数据库，因此您应该使用 AJAX，cluetip 有一个内置函数可以满足该需求，因此请阅读 DOC API。

然后您应该使用ajaxProcess:而不是onShow

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