一款纯CSS实现的方向敏感信息提示框

CSS ToolTip Smooth animation，悬停在按钮上时，按钮会轻微浮动，提示框也呈现平滑渐入的动画。

css3, tooltip, widget

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* Start Fonts from Google Fonts */
/*Google Fonts*/

@import url('https://fonts.googleapis.com/css?family=Arapey|Cantarell|Comfortaa|Khand|Russo+One|Ubuntu');
/*End Fonts*/
/* Start Body */

body {
    background: #EEE;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #444;
    font-family: 'Comfortaa', cursive;
    text-align: center;
    font: 16px;
}
/* End Body */

h1 {
    margin-bottom: 7%;
}
/*tooltip Box*/

.con-tooltip {
    position: relative;
    background: #F2D1C9;
    border-radius: 9px;
    padding: 0 20px;
    margin: 10px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    cursor: default;
}
/*tooltip */

.tooltip {
    visibility: hidden;
    z-index: 1;
    opacity: .40;
    width: 100%;
    padding: 0px 20px;
    background: #333;
    color: #E086D3;
    position: absolute;
    top: -140%;
    left: -25%;
    border-radius: 9px;
    font: 16px;
    transform: translateY(9px);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}
/* tooltip  after*/

.tooltip::after {
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12.5px 0 12.5px;
    border-color: #333 transparent transparent transparent;
    position: absolute;
    left: 40%;
}
.con-tooltip:hover .tooltip {
    visibility: visible;
    transform: translateY(-10px);
    opacity: 1;
    transition: .3s linear;
    animation: odsoky 1s ease-in-out infinite alternate;
}
@keyframes odsoky {
    0% {
        transform: translateY(6px);
    }
    100% {
        transform: translateY(1px);
    }
}
/*hover ToolTip*/

.left:hover {
    transform: translateX(-6px);
}
.top:hover {
    transform: translateY(-6px);
}
.bottom:hover {
    transform: translateY(6px);
}
.right:hover {
    transform: translateX(6px);
}
/*left*/

.left .tooltip {
    top: -20%;
    left: -170%;
}
.left .tooltip::after {
    top: 40%;
    left: 90%;
    transform: rotate(-90deg);
}
/*bottom*/

.bottom .tooltip {
    top: 115%;
    left: -20%;
}
.bottom .tooltip::after {
    top: -17%;
    left: 40%;
    transform: rotate(180deg);
}
/*right*/

.right .tooltip {
    top: -20%;
    left: 115%;
}
.right .tooltip::after {
    top: 40%;
    left: -12%;
    transform: rotate(90deg);
}
h3 {
    background: #333;
    color: #E086D3;
    padding: 10px 20px;
    border-radius: 56px;
    width: 8em;
    margin: 20% auto 1% auto;
}

HTML

CSS ToolTip Smooth animation，悬停在按钮上时，按钮会轻微浮动，提示框也呈现平滑渐入的动画。

css3, tooltip, widget

编辑器支持Emmet

快捷键

CSS ToolTip Smooth animation，悬停在按钮上时，按钮会轻微浮动，提示框也呈现平滑渐入的动画。

css3, tooltip, widget

纯CSS实现一个简单实用的悬停提示信息框

一款实用的纯CSS实现方向敏感悬停动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：