html - 包含 HTML 的交互式 CSS 工具提示框

Question

经过一番浏览后，我发现了一段代码，它在一定程度上可以满足我的要求。我可以将鼠标悬停在一些文本上并显示一个包含 HTML 的工具提示框，因此其中可以包含图像、链接等。

我让它在 jQuery 中完美而轻松地工作。问题是，它是针对 eBay 描述的，而 jQuery 不会加载到网站上，因此它被破坏了。这意味着我必须在 CSS 中完成。

下面是我的代码 - 它解决了当您将鼠标悬停在它所在的位置时出现该框的问题，而不仅仅是当您将鼠标悬停在文本上时您希望它出现 - 而且光标已停止更改为帮助符号出于某种原因。

我已经构建了一个 JSFiddle，因为它似乎对此很有意义(虽然帮助光标在这里确实有效，所以我的较长代码中一定有其他东西)

http://jsfiddle.net/t19vkd5k/

.tiptext {
    width: auto;
    font-family: 'ProximaNova', Helvetica;
    font-weight: bold;
    text-decoration: underline;
    font-size: 14px;
    /*line-height: 175%;*/
    color: rgb(39, 44, 45);
    cursor: help !important;
    position: relative;
}

.description {
    border:1px solid #e3e3e3;
    background: white;
    width:auto;
    max-width:275px;
    height:auto;
    padding:10px;
    font-family: 'ProximaNova', Helvetica;
    font-weight: 200;
    color: rgb(39, 44, 45);
    font-size: 13px;
    top:29px;
    left: 120px;
    z-index:500;
    opacity:0;
    /*visibility:hidden;*/
    position:absolute;
    -webkit-transition: opacity 0.9s ease-out;
    -moz-transition: opacity 0.9s ease-out;
    -ms-transition: opacity 0.9s ease-out;
    -o-transition: opacity 0.9s ease-out;
    transition: visibility 0s 2s, opacity 2s linear;
}

.tiptext:hover .description { /* display tooltip on hover */
    opacity:1;
    -webkit-transition: opacity 0.1s ease-in;
    -moz-transition: opacity 0.1s ease-in;
    -ms-transition: opacity 0.1s ease-in;
    -o-transition: opacity 0.1s ease-in;
    transition: opacity 0.1s ease-in;
}

HTML

<div class="tiptext">Hover over me<div class="description" style="text-align:center;">and this box appears with full html support like links to  <a href="https://www.google.com" target="_blank">Google</a><br>the problem is, this box also appears when you mouse over where it would be.</div></div>

Answer 1

感谢 @1l13v 的输入，但我使用可见性和其他一些技巧编辑了一个建议，并得到了一些完美的东西，对于任何搜索者来说，它也 100% 兼容 eBay。一个交互式 CSS 工具提示框，可以包含链接或图片，并且仅在鼠标悬停时出现。它有快速淡入和缓慢淡出的动画，在我的例子中它还有一个帮助框的问号。

我结束了

.tiptext {cursor: help;font-family:'ProximaNova',Helvetica;font-weight: bold;text-decoration: underline;font-size: 14px;line-height: 172%;color:rgb(39, 44, 45);}

.description {border:1px solid #e3e3e3;background: white;width:auto;max-width:275px;height:auto;padding:10px;font-family: 'ProximaNova', Helvetica;font-weight: 300;color: rgb(39, 44, 45);font-size: 13px;z-index: 500;position: absolute;margin-left: 50px;margin-top: 20px;cursor: default;display: inline-block;}

.tiptext > .description {
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.4s,opacity 0.4s linear;
}

.tiptext:hover > .description {
    visibility:visible;
    opacity:1;
    transition-delay:0.1s;
    -webkit-transition: opacity 0.1s ease-in;
    -moz-transition: opacity 0.1s ease-in;
    -ms-transition: opacity 0.1s ease-in;
    -o-transition: opacity 0.1s ease-in;
    transition: opacity 0.1s ease-in;
}

<div class="tiptext"><div class="description" style="width:300px">This text is in the tool tip box and can include HTML just like any standard div container, allowing you to add links or photos. It only fades away when you move away from tooltip box or the link so you can interact with it.</div>This is the text you hover over for the tool tip to appear.</div>

还有一把 fiddle ... http://jsfiddle.net/a64gpc40/