CSS3动画工具提示

CSS3 animated tooltips Today I will tell you how to create simple and attractive CSS3 tooltips with using transitions and several another css3 properties. You will see all these tooltips directly in that article. You can apply custom tooltips and for text elements and for images too.

CSS3动画工具提示今天，我将告诉您如何使用过渡和其他几个css3属性来创建简单而吸引人CSS3工具提示。 您将在该文章中直接看到所有这些工具提示。 您可以为文本元素和图像应用自定义工具提示。

Ok, lets start !

好，开始吧！

步骤1. HTML (Step 1. HTML)

Lets imagine, that you have some plain text, as example:

假设您有一些纯文本，例如：

<div class="content">The King sat naked. Like a foolish pauper on the street, he sat leaning against a cold wall, drawing in his blue, goose-bumped legs. He shivered, with his eyes closed, he listened, but everything was quiet.</div>

<div class="content">The King sat naked. Like a foolish pauper on the street, he sat leaning against a cold wall, drawing in his blue, goose-bumped legs. He shivered, with his eyes closed, he listened, but everything was quiet.</div>

Now, lets wrap few words with tooltip:

现在，用工具提示包装几句话：

<div class="content">The King sat naked. Like a <span>foolish pauper<i>foolish pauper tooltip</i></span> on the street, he sat leaning against a cold wall, drawing in his blue, goose-bumped legs. He shivered, with his eyes closed, he listened, but everything was quiet.</div>

<div class="content">The King sat naked. Like a <span>foolish pauper<i>foolish pauper tooltip</i></span> on the street, he sat leaning against a cold wall, drawing in his blue, goose-bumped legs. He shivered, with his eyes closed, he listened, but everything was quiet.</div>

How I did it – pretty easy:

我是怎么做到的-很简单：

步骤2. CSS (Step 2. CSS)

First, lets define style for our visible tooltip element:

首先，让我们为可见的工具提示元素定义样式：

.content span {
    background:#eee;
    border:1px solid #444;
    cursor:pointer;
    display:inline-block;
    outline:none;
    padding:0 5px;
    position:relative;
    text-decoration:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}

.content span {
    background:#eee;
    border:1px solid #444;
    cursor:pointer;
    display:inline-block;
    outline:none;
    padding:0 5px;
    position:relative;
    text-decoration:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}

And now – for its hidden (floating) area:

现在-对于其隐藏(浮动)区域：

.content span i {
    visibility:hidden;
    border:1px solid #444;
    bottom:60px;
    left:50%;
    margin-left:-110px;
    opacity:0;
    padding:10px;
    position:absolute;
    width:200px;
    z-index:99;
    background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-color: #eee;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.content span:hover i {
    bottom:30px;
    opacity:0.95;
    visibility:visible;
}

.content span i {
    visibility:hidden;
    border:1px solid #444;
    bottom:60px;
    left:50%;
    margin-left:-110px;
    opacity:0;
    padding:10px;
    position:absolute;
    width:200px;
    z-index:99;
    background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-color: #eee;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.content span:hover i {
    bottom:30px;
    opacity:0.95;
    visibility:visible;
}

Fine and easy, right? But that’s not all. I have prepared several more effects (and even with different colors).

好简单，对吧？ 但这还不是全部。 我还准备了几种效果(甚至使用不同的颜色)。

This is tooltip#1Tooltip number one. Which can be in redTooltip#1 – red color, greenTooltip#1 – green color and blueTooltip#1 – blue color.

这是第1条工具提示 。 可以是红色Tooltip＃1 –红色 ， 绿色Tooltip＃1 –绿色 ， 蓝色Tooltip＃1 –蓝色 。

---

---

This is tooltip#2Tooltip number two. Which can be in redTooltip#2 – red color, greenTooltip#2 – green color and blueTooltip#2 – blue color.

这是第二个工具提示 。 可以是红色Tooltip＃2(红色) ， 绿色Tooltip＃2(绿色)和蓝色Tooltip＃2(蓝色) 。

---

---

This is tooltip#3Tooltip number three. Which can be in redTooltip#3 – red color, greenTooltip#3 – green color and blueTooltip#3 – blue color.

这是tooltip＃3 Tooltip第三 。 可以是红色Tooltip＃3(红色) ， 绿色Tooltip＃3(绿色)和蓝色Tooltip＃3(蓝色) 。

---

---

This is tooltip#4Tooltip number four. Which can be in redTooltip#4 – red color, greenTooltip#4 – green color and blueTooltip#4 – blue color.

这是第4条工具提示 。 可以是红色Tooltip＃4(红色) ， 绿色Tooltip＃4(绿色)和蓝色Tooltip＃4(蓝色) 。

---

---

This is HTML markup of all these samples:

这是所有这些示例HTML标记：

<div class="content">
This is <span>tooltip#1<i class="v1">Tooltip number one</i></span>. Which can be in <span class="r">red<i class="v1">Tooltip#1 - red color</i></span>, <span class="g">green<i class="v1">Tooltip#1 - green color</i></span> and <span class="b">blue<i class="v1">Tooltip#1 - blue color</i></span>.
<hr />
This is <span>tooltip#2<i class="v2">Tooltip number two</i></span>. Which can be in <span class="r">red<i class="v2">Tooltip#2 - red color</i></span>, <span class="g">green<i class="v2">Tooltip#2 - green color</i></span> and <span class="b">blue<i class="v2">Tooltip#2 - blue color</i></span>.
<hr />
This is <span>tooltip#3<i class="v3">Tooltip number three</i></span>. Which can be in <span class="r">red<i class="v3">Tooltip#3 - red color</i></span>, <span class="g">green<i class="v3">Tooltip#3 - green color</i></span> and <span class="b">blue<i class="v3">Tooltip#3 - blue color</i></span>.
<hr />
This is <span>tooltip#4<i class="v4">Tooltip number four</i></span>. Which can be in <span class="r">red<i class="v4">Tooltip#4 - red color</i></span>, <span class="g">green<i class="v4">Tooltip#4 - green color</i></span> and <span class="b">blue<i class="v4">Tooltip#4 - blue color</i></span>.
<hr />
<span class="img">
    <img src="https://www.script-tutorials.com/demos/209/images/1.jpg">
    <i><img src="https://www.script-tutorials.com/demos/209/images/1.jpg"></i>
</span>
<span class="img g">
    <img src="https://i-blog.csdnimg.cn/blog_migrate/4c1361bf002649f0befe932862e127fd.jpeg">
    <i class="v2"><img src="https://i-blog.csdnimg.cn/blog_migrate/4c1361bf002649f0befe932862e127fd.jpeg"></i>
</span>
<span class="img r">
    <img src="https://www.script-tutorials.com/demos/209/images/3.jpg">
    <i class="v3"><img src="https://www.script-tutorials.com/demos/209/images/3.jpg"></i>
</span>
</div>

<div class="content">
This is <span>tooltip#1<i class="v1">Tooltip number one</i></span>. Which can be in <span class="r">red<i class="v1">Tooltip#1 - red color</i></span>, <span class="g">green<i class="v1">Tooltip#1 - green color</i></span> and <span class="b">blue<i class="v1">Tooltip#1 - blue color</i></span>.
<hr />
This is <span>tooltip#2<i class="v2">Tooltip number two</i></span>. Which can be in <span class="r">red<i class="v2">Tooltip#2 - red color</i></span>, <span class="g">green<i class="v2">Tooltip#2 - green color</i></span> and <span class="b">blue<i class="v2">Tooltip#2 - blue color</i></span>.
<hr />
This is <span>tooltip#3<i class="v3">Tooltip number three</i></span>. Which can be in <span class="r">red<i class="v3">Tooltip#3 - red color</i></span>, <span class="g">green<i class="v3">Tooltip#3 - green color</i></span> and <span class="b">blue<i class="v3">Tooltip#3 - blue color</i></span>.
<hr />
This is <span>tooltip#4<i class="v4">Tooltip number four</i></span>. Which can be in <span class="r">red<i class="v4">Tooltip#4 - red color</i></span>, <span class="g">green<i class="v4">Tooltip#4 - green color</i></span> and <span class="b">blue<i class="v4">Tooltip#4 - blue color</i></span>.
<hr />
<span class="img">
    <img src="https://www.script-tutorials.com/demos/209/images/1.jpg">
    <i><img src="https://www.script-tutorials.com/demos/209/images/1.jpg"></i>
</span>
<span class="img g">
    <img src="https://i-blog.csdnimg.cn/blog_migrate/4c1361bf002649f0befe932862e127fd.jpeg">
    <i class="v2"><img src="https://i-blog.csdnimg.cn/blog_migrate/4c1361bf002649f0befe932862e127fd.jpeg"></i>
</span>
<span class="img r">
    <img src="https://www.script-tutorials.com/demos/209/images/3.jpg">
    <i class="v3"><img src="https://www.script-tutorials.com/demos/209/images/3.jpg"></i>
</span>
</div>

And – the final CSS stylesheet:

以及–最终CSS样式表：

.content {
    background-color:rgba(255,255,255, 0.9);
    margin:50px auto;
    width:800px;
}
.content span {
    background:#eee;
    border:1px solid #444;
    cursor:pointer;
    display:inline-block;
    outline:none;
    padding:0 5px;
    position:relative;
    text-decoration:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}
.content span i {
    visibility:hidden;
    border:1px solid #444;
    bottom:60px;
    left:50%;
    margin-left:-110px;
    opacity:0;
    padding:10px;
    position:absolute;
    width:200px;
    z-index:99;
    background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-color: #eee;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.content span:hover i {
    bottom:30px;
    opacity:0.95;
    visibility:visible;
}
.content span:hover i.v2 {
    bottom:30px;
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -ms-transform:scale(1.3);
    -o-transform:scale(1.3);
    transform:scale(1.3);
}
.content span:hover i.v3 {
    -webkit-transform:rotateX(360deg) scale(1.2);
    -moz-transform:rotateX(360deg) scale(1.2);
    -ms-transform:rotateX(360deg) scale(1.2);
    -o-transform:rotateX(360deg) scale(1.2);
    transform:rotateX(360deg) scale(1.2);
}
.content span i.v4 {
    height:70px;
    margin-left:-60px;
    padding-top:40px;
    text-align:center;
    width:100px;
    -webkit-border-radius: 50% 50% 50% 50%;
    -moz-border-radius: 50% 50% 50% 50%;
    -ms-border-radius: 50% 50% 50% 50%;
    -o-border-radius: 50% 50% 50% 50%;
    border-radius: 50% 50% 50% 50%;
}
.content span i:before,.content span i:after {
    border-bottom:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid #444;
    bottom:-8px;
    content:"";
    left:50%;
    margin-left:-8px;
    position:absolute;
    z-index:100;
}
/* custom colors */
.content span.r {
    background:#f88;
}
.content span.r i {
    background-color:#f44;
    border:1px solid #f44;
}
.content span.r i:before, .content span.r i:after {
    border-top-color:#f44;
}
.content span.g {
    background:#8f8;
}
.content span.g i {
    background-color:#4f4;
    border:1px solid #4f4;
}
.content span.g i:before, .content span.g i:after {
    border-top-color:#4f4;
}
.content span.b {
    background:#88f;
}
.content span.b i {
    background-color:#44f;
    border:1px solid #44f;
}
.content span.b i:before, .content span.b i:after {
    border-top-color:#44f;
}
/* images */
.content span img {
    height:128px;
    width:128px;
}
.content span.img i {
    height:auto;
    margin-left:-65px;
    margin-top:-10px;
    width:auto;
}
.content span.img i:before, .content span.img i:after {
    display:none;
}
.content span:hover i img {
    height:auto;
    width:auto;
}

.content {
    background-color:rgba(255,255,255, 0.9);
    margin:50px auto;
    width:800px;
}
.content span {
    background:#eee;
    border:1px solid #444;
    cursor:pointer;
    display:inline-block;
    outline:none;
    padding:0 5px;
    position:relative;
    text-decoration:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}
.content span i {
    visibility:hidden;
    border:1px solid #444;
    bottom:60px;
    left:50%;
    margin-left:-110px;
    opacity:0;
    padding:10px;
    position:absolute;
    width:200px;
    z-index:99;
    background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-color: #eee;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.content span:hover i {
    bottom:30px;
    opacity:0.95;
    visibility:visible;
}
.content span:hover i.v2 {
    bottom:30px;
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -ms-transform:scale(1.3);
    -o-transform:scale(1.3);
    transform:scale(1.3);
}
.content span:hover i.v3 {
    -webkit-transform:rotateX(360deg) scale(1.2);
    -moz-transform:rotateX(360deg) scale(1.2);
    -ms-transform:rotateX(360deg) scale(1.2);
    -o-transform:rotateX(360deg) scale(1.2);
    transform:rotateX(360deg) scale(1.2);
}
.content span i.v4 {
    height:70px;
    margin-left:-60px;
    padding-top:40px;
    text-align:center;
    width:100px;
    -webkit-border-radius: 50% 50% 50% 50%;
    -moz-border-radius: 50% 50% 50% 50%;
    -ms-border-radius: 50% 50% 50% 50%;
    -o-border-radius: 50% 50% 50% 50%;
    border-radius: 50% 50% 50% 50%;
}
.content span i:before,.content span i:after {
    border-bottom:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid #444;
    bottom:-8px;
    content:"";
    left:50%;
    margin-left:-8px;
    position:absolute;
    z-index:100;
}
/* custom colors */
.content span.r {
    background:#f88;
}
.content span.r i {
    background-color:#f44;
    border:1px solid #f44;
}
.content span.r i:before, .content span.r i:after {
    border-top-color:#f44;
}
.content span.g {
    background:#8f8;
}
.content span.g i {
    background-color:#4f4;
    border:1px solid #4f4;
}
.content span.g i:before, .content span.g i:after {
    border-top-color:#4f4;
}
.content span.b {
    background:#88f;
}
.content span.b i {
    background-color:#44f;
    border:1px solid #44f;
}
.content span.b i:before, .content span.b i:after {
    border-top-color:#44f;
}
/* images */
.content span img {
    height:128px;
    width:128px;
}
.content span.img i {
    height:auto;
    margin-left:-65px;
    margin-top:-10px;
    width:auto;
}
.content span.img i:before, .content span.img i:after {
    display:none;
}
.content span:hover i img {
    height:auto;
    width:auto;
}

结论 (Conclusion)

I hope you enjoyed this tutorial and find it useful! Welcome back to read our new tutorials!

我希望您喜欢本教程并发现它有用！ 欢迎回到阅读我们的新教程！

翻译自: https://www.script-tutorials.com/css3-animated-tooltips/