纯CSS3实现的鼠标悬停呈现提示信息框

鼠标悬停在文章中带阴影背景的文本上，弹出带小箭头的提示信息框。

css3, tooltip

《使用js把svg图形转成png图像》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400,300);
::-moz-selection {
    background: rgba(0, 0, 0, 0.2);
}
::selection {
    background: rgba(0, 0, 0, 0.2);
}
/* Skip to line 40 for the hover code */

body {
    background: #fff;
    background-size: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    margin: 80px 4em 0;
    color: #333;
}
h1 {
    max-width: 49rem;
    font-size: 3.5em;
    line-height: 1em;
    font-weight: 700;
    margin: 0.25em auto;
}
h2 {
    max-width: 49rem;
    margin: 1.4em auto;
}
p {
    line-height: 1.5em;
    margin: 1.4em auto;
    max-width: 49rem;
    font-size: 1em;
    font-weight: 300;
}
a.dfn-hover {
    color: #333;
    text-decoration: none;
}
/** Code for hover info **/

dfn {
    background: #e9e9e9;
    border-bottom: dashed 1px rgba(0, 0, 0, 0.8);
    padding: 0 0.4em;
    cursor: help;
    font-style: normal;
    position: relative;
}
dfn::after {
    content: attr(data-info);
    display: inline;
    position: absolute;
    top: 22px;
    left: 0;
    opacity: 0;
    width: 230px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5em;
    padding: 0.5em 0.8em;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    pointer-events: none;
    /* This prevents the box from apearing when hovered. */
    
    transition: opacity 250ms, top 250ms;
}
dfn::before {
    content: '';
    display: block;
    position: absolute;
    top: 12px;
    left: 20px;
    opacity: 0;
    width: 0;
    height: 0;
    border: solid transparent 5px;
    border-bottom-color: rgba(0, 0, 0, 0.8);
    transition: opacity 250ms, top 250ms;
}
dfn:hover {
    z-index: 2;
}
/* Keeps the info boxes on top of other elements */

dfn:hover::after,
dfn:hover::before {
    opacity: 1;
}
dfn:hover::after {
    top: 30px;
}
dfn:hover::before {
    top: 20px;
}

HTML

<h1>Info on Hover!</h1>

<h2>Prettifying the 'title' attribute without Javascript!</h2>

<p>You can use this for lots of different purposes. You can display links: <a class="dfn-hover" href="https://www.guuslieben.nl/"><dfn data-info="https://www.guuslieben.nl/">My Website!</dfn></a>, Give information about something: <dfn data-info="JavaScript is the programming language of HTML and the Web.">Javascript</dfn>    and who knows what else!.</p>

<p>You can make your page more compact by <i>hiding</i> the information with the data info. You can make text as long or short as you want! Example: <dfn data-info="HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardised in 1997.

Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.">About HTML5</dfn>.
    Are you ready for it? Follow <a href="https://guuslieben.nl/uploads/hover-info.zip" download>the link</a> to download.</p>

鼠标悬停在文章中带阴影背景的文本上，弹出带小箭头的提示信息框。

css3, tooltip

编辑器支持Emmet

快捷键

鼠标悬停在文章中带阴影背景的文本上，弹出带小箭头的提示信息框。

css3, tooltip

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

4个纯CSS实现的信息提示框（可带图片）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：