zoukankan      html  css  js  c++  java
  • jQuery Tooltip Plugin Demo

    jQuery Tooltip Plugin Demo

    Three elements with tooltips, default settingsLink to google

    Code

    $('#set1 *').tooltip();
    Using bodyHandler to display footnotes in the tooltipSome text referring to a footnote.




    And here is the actual footnote, complete with nested HTML.

    Code

    $("#foottip a").tooltip({ 
        bodyHandler: function() { 
            return $($(this).attr("href")).html(); 
        }, 
        showURL: false 
    });
    An image with a tooltip

    Code

    $('#tonus').tooltip({ 
        delay: 0
        showURL: false
        bodyHandler: function() { 
            return $("<img/>").attr("src"this.src); 
        } 
    });
    Blocking tooltips
    $("#block").click($.tooltip.block);
    The next four links have no delay with tracking and fading, with extra content:

    Code

    $('#yahoo a').tooltip({ 
        track: true
        delay: 0
        showURL: false
        showBody: " - "
        fade: 250 
    });
    Tooltips with extra classes. Useful for different tooltip styles on a single page.Note how the one on the right gets a different background image when at the right viewport border.
    A fancy tooltip, now with some custom positioning. A fancy tooltip, now with some custom positioning.

    And now, for the fancy stuff, a tooltip with an extra class for nice shadows, and some extra content




    Code

    $("#fancy, #fancy2").tooltip({ 
        track: true
        delay: 0
        showURL: false
        opacity: 1
        fixPNG: true
        showBody: " - "
        extraClass: "pretty fancy"
        top: -15
        left: 5 
    }); 
     
    $('#pretty').tooltip({ 
        track: true
        delay: 0
        showURL: false
        showBody: " - "
        extraClass: "pretty"
        fixPNG: true
        opacity: 0.95
        left: -120 
    });
    Selects
    Image map with tooltips.

    Code

    $("map *").tooltip({ positionLeft: true });
    Testing repositioning at viewport borders

    Tooltip width auto width
    Google me!
    Google me!

    Code

    $('#right a').tooltip({ 
        track: true
        delay: 0
        showURL: false
        extraClass: "right" 
    }); 
    $('#right2 a').tooltip({ showURL: false, positionLeft: true });
  • 相关阅读:
    结对-结对编程项目作业名称-结对项目总结
    课后作业 -团队项目编程进度
    团队-象棋游戏-模块开发过程
    团队-象棋游戏-模块测试过程
    结队-结队编程项目作业名称-项目进度
    课后作业-阅读任务-阅读笔记-3
    团队-象棋游戏-需求分析
    团队-象棋游戏-成员简介及分工
    课后作业 -团队项目编程进度
    团队编程 象棋游戏 开发文档
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/2086836.html
Copyright © 2011-2022 走看看