使用CSS3和jQuery实现各个位置的气泡信息提示框

Popup Tooltip 可在下拉列表中选择信息提示弹出框的淡入位置。

jQuery

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2561
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    $('#start').popupTooltip('top-right', 'Choose your side of tooltip :)');

$('#side').bind('change', function() {
        var text = $('#source').val().replace("{side}", $(this).val());

$('.popupTooltip').trigger('hide');
        $('#element').popupTooltip($(this).val(), text);

$('#element select option[selected="selected"]').prop('selected', false);
        $("#element select option:first").prop('selected', true);
    });
});

(function($) {
    $.fn.popupTooltip = function(side, text) {
        var $_elm = $(this);
        $_elm.css('position', 'relative');
        if ($_elm.is('span')) $_elm.css('display', 'inbline-block');

var $_popup = $('<div>')
            .addClass('popupTooltip')
            .addClass('side-' + side)
            .text(text)
            .hide()
            .bind('click', function() {
                return false;
            });

var $_close = $('<span>')
            .addClass('popupTooltip-close')
            .bind('click', function() {
                closePopup()
                return false;
            });

$_popup.append($_close);
        $_elm.append($_popup);

$_popup.fadeIn(600);

if (side == 'right' || side == 'left') {
            $_popup.css('margin-top', $_popup.outerHeight() / 2 * (-1));
        }

var timeout = setTimeout(closePopup, 10000);

function closePopup() {
            $_popup.fadeOut(600, function() {
                $_popup.remove();
            });
        }

$_elm.on('hide', function() {
            closePopup();
        })

};
})(jQuery);

编译

CSS

body {
    font-family: Arial
}
#element {
    margin: 0 20px;
    padding: 30px;
    display: inline-block;
    border: 1px solid #999;
    border-radius: 5px;
    width: 220px;
}
#side,
#source {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
}
#source {
    margin-top: 10px;
    resize: none;
}
/* Plugin Style */

.popupTooltip {
    width: 200px;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    padding: 10px 20px;
    color: #fff;
    position: absolute;
    z-index: 10001;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}
.popupTooltip:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}
.popupTooltip .popupTooltip-close {
    position: absolute;
    right: 7px;
    top: 7px;
    display: none;
    width: 10px;
    height: 10px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAAD1BMVEUAAAD///////////////+PQt5oAAAABHRSTlMAcFwSAtVt2gAAAC1JREFUCNdjMGJgYFBmUBFgYHRiYHRkEBFgYBARdAQKMroIQEmICEQWohKiCwBzUAPbUGfWNwAAAABJRU5ErkJggg==');
}
.popupTooltip:hover .popupTooltip-close {
    display: block;
    cursor: pointer;
}
.popupTooltip.side-top {
    bottom: 100%;
    margin-bottom: 10px;
    left: 50%;
    margin-left: -100px;
}
.popupTooltip.side-top-right {
    bottom: 100%;
    margin-bottom: 10px;
    right: 0;
}
.popupTooltip.side-top-left {
    bottom: 100%;
    margin-bottom: 10px;
    left: 0;
}
.popupTooltip.side-right {
    left: 100%;
    margin-left: 10px;
    top: 50%;
}
.popupTooltip.side-right-top {
    left: 100%;
    margin-left: 10px;
    top: 0;
}
.popupTooltip.side-right-bottom {
    left: 100%;
    margin-left: 10px;
    bottom: 0;
}
.popupTooltip.side-bottom {
    top: 100%;
    margin-top: 10px;
    left: 50%;
    margin-left: -100px;
}
.popupTooltip.side-bottom-left {
    top: 100%;
    margin-top: 10px;
    left: 0;
}
.popupTooltip.side-bottom-right {
    top: 100%;
    margin-top: 10px;
    right: 0;
}
.popupTooltip.side-left {
    right: 100%;
    margin-right: 10px;
    top: 50%;
}
.popupTooltip.side-left-top {
    right: 100%;
    margin-right: 10px;
    top: 0;
}
.popupTooltip.side-left-bottom {
    right: 100%;
    margin-right: 10px;
    bottom: 0;
}
.popupTooltip.side-top:before,
.popupTooltip.side-top-left:before,
.popupTooltip.side-top-right:before {
    border-width: 10px 9px 0 9px;
    border-color: rgba(0, 0, 0, 0.7) transparent transparent;
    bottom: -10px;
    left: 50%;
    margin-left: -9px;
}
.popupTooltip.side-top-left:before {
    right: auto;
    left: 0;
    margin-left: 9px;
}
.popupTooltip.side-top-right:before {
    left: auto;
    right: 0;
    margin-right: 9px;
}
.popupTooltip.side-right:before,
.popupTooltip.side-right-top:before,
.popupTooltip.side-right-bottom:before {
    border-width: 9px 10px 9px 0;
    border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
    left: -10px;
    top: 50%;
    margin-top: -9px;
}
.popupTooltip.side-right-top:before {
    top: 0;
    bottom: auto;
    margin-top: 9px;
}
.popupTooltip.side-right-bottom:before {
    top: auto;
    bottom: 0;
    margin-bottom: 9px;
}
.popupTooltip.side-bottom:before,
.popupTooltip.side-bottom-left:before,
.popupTooltip.side-bottom-right:before {
    border-width: 0 9px 10px 9px;
    border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
    top: -10px;
    left: 50%;
    margin-left: -9px;
}
.popupTooltip.side-bottom-left:before {
    right: auto;
    left: 0;
    margin-left: 9px;
}
.popupTooltip.side-bottom-right:before {
    right: 0;
    left: auto;
    margin-right: 9px;
}
.popupTooltip.side-left:before,
.popupTooltip.side-left-top:before,
.popupTooltip.side-left-bottom:before {
    border-width: 9px 0 9px 10px;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.7);
    right: -10px;
    top: 50%;
    margin-top: -9px;
}
.popupTooltip.side-left-top:before {
    top: 0;
    bottom: auto;
    margin-top: 9px;
}
.popupTooltip.side-left-bottom:before {
    top: auto;
    bottom: 0;
    margin-bottom: 9px;
}

HTML

Popup Tooltip 可在下拉列表中选择信息提示弹出框的淡入位置。

jQuery

编辑器支持Emmet

快捷键

Popup Tooltip 可在下拉列表中选择信息提示弹出框的淡入位置。

jQuery

使用jQuery和CSS3实现的超简单闪烁星空（繁星点点）动画背景

用jQuery和CSS3实现的动画效果相册模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：