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 });
  • 相关阅读:
    CTO成长之路分享会
    MySQL 数据库 varchar 到底可以存多少个汉字,多少个英文呢?我们来搞搞清楚
    《共享经济》创业沙龙
    旅游代购
    沙漏哟的书单
    qt5---滑动条QSlider
    qt5---步长调节器SpinBox和QDoubleSpinBox
    qt5--自定义控件封装
    qt5--表格控件QTableWidget
    qt5--树形控件QTreeWidget
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/2086836.html
Copyright © 2011-2022 走看看