包含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，但我编辑了一个使用可见性和其他一些hack的建议，并得到了一些完美的工作，这对于任何搜索也是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>

还有小提琴……http://jsfiddle.net/a64gpc40/

Answer 2

您应该像这样将您的Hover over me放在单独的div中:

<div class="target"> Hover over me </div>

，当您将.target类悬停时，只显示工具提示，像这样:

.target: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;
}

试试这个