工具提示图标保留在工具提示中

时间:2017-04-15 07:43:04

标签: javascript jquery html css tooltip

当我将鼠标悬停在工具提示图标(问号)上以显示工具提示时, 如何将图标保留在工具提示中?所需结果的样本如下所示。 提前谢谢。

A sample of desired result

更新

感谢@Leguest 这是完整的html,css和jQuery代码: 这个工具提示背后的想法并不是很原始,实际上Apple网站的结账页面激发了我的灵感!

如果将鼠标悬停在问号上,则会显示工具提示框, 现在我想为工具提示图标添加click事件,以便工具提示框保持打开状态,除非我单击页面的空白部分。



$('a.as-whats-this-toggle').hover(
    function(){
       $(this).next().removeClass('hidden');
    },
    function(){
       $(this).next().addClass('hidden');
});

.as-whats-this-toggle {
    display: block;
    background: #0089d1;
    position: absolute;
    height: 1.4rem;
    width: 1.4rem;
    padding: 0;
    text-decoration: none;
    text-indent: 100%;
    background: url(../images/icon-help-overlay.svg) no-repeat;
    background-size: 1.5rem 1.5rem;
    border-radius: 2rem;
    z-index: 1032;
    overflow: hidden;
}

.as-whats-this:hover .as-whats-this-info {
    display: block;
    cursor: default;
}


.hidden {
    display: none;
}

.as-whats-this-info-top {
    bottom: -.5rem;
}

.as-whats-this-info-left {
    right: -.8rem;
}

.as-whats-this-info {
    background: #fff;
    border: .1rem solid #ccc;
    border-radius: .5rem;
    box-shadow: 0.3rem 0.3rem 1rem #999;
    color: #666;
    padding: .7rem 1rem 1.2rem 3.1rem;
    position: absolute;
    width: 30rem;
    z-index: 1031;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.6rem;
    white-space: normal;
}

<link href="https://store.storeimages.cdn-apple.com/4974/store.apple.com/shop/rs-transaction/dist/cart.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="margin-left:300px; margin-top:130px">
<info data-title="Information on Estimated Tax" data-uid="tax-help" data-   position="top left">
  <div class="as-whats-this">
    <a href="#tax-help" role="button" class="as-whats-this-toggle" aria-describedby="tax-help">Information on Estimated Tax</a>
      <div class="as-whats-this-info tal hidden as-whats-this-info-top as-whats-this-info-left" aria-hidden="true" role="tooltip" id="tax-help">
        <h3 class="mbs fwb">Estimated Tax</h3>
        <p>The sales tax listed on the checkout page is only an estimate. The final total sales tax will be reflected on your invoice and will include state and local sales taxes, as well as any applicable rebates or fees. In CA and RI sales tax is collected on the unbundled price of the iPhone.</p>
      </div>
  </div>
</info>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案