使CSS工具提示点击时打开（加上关闭按钮）

问题描述：

我有以下CSS工具提示 - See this fiddle。使CSS工具提示点击时打开（加上关闭按钮）

目前它显示何时被徘徊，并在不再被徘徊时消失。

如何在用户单击它时显示并在关闭按钮内部显示，因此单击关闭按钮时它会消失（但再次单击时应再次出现）？

HTML：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
     <table border="1"> 
     <col style="width:128px;" /> 
       <thead> 
      <tr> 
      <th>4</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td> 
       <p class="inline">Sample A</p><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></span> 

      </td> 
      </tr>  
     </tbody> 
     </table>

CSS：

.help { 
    position: relative 
} 

.help .help-text { 
    display: none; 
    background-color: #FDFCEF; 
    border: 1px solid #E8E5C1; 
    border-radius: 4px; 
    color: #333; 
    font-size: 12px; 
    font-weight: 400; 
    padding: 5px; 
    white-space: normal; 
    position: absolute; 
    z-index: 1000; 
    box-shadow: 0 1px 3px 3px rgba(0, 0, 0, .05); 
    transition: all .3s ease; 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    left: -15px; 
    top: calc(100% + 5px); 
    line-height: 1.2 
} 

.help .help-text:after, 
.help .help-text:before { 
    bottom: 100%; 
    left: 50%; 
    left: 13%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none 
} 

.help .help-text:after { 
    border-color: transparent transparent #FDFCEF; 
    border-width: 8px; 
    margin-left: -8px 
} 

.help .help-text:before { 
    border-color: transition transition #E8E5C1; 
    border-width: 10px; 
    margin-left: -10px 
} 

.help:hover .help-text { 
    display: block 
} 

.help-text { 
    width: 185px 
} 

.help-icon { 
    padding-left: 3px; 
    color: #789cbf; 
    font-size: .9em!important; 
    vertical-align: 0!important; 
    cursor: help 
} 

.other { 
    display: inline 
} 

p.inline { 
    display: inline-block 
} 

.inline { 
    display: inline-block 
} 

.box { 
    font-size: .65em; 
    color: #FFF; 
    background-color: #00cc4f; 
    font-weight: 700; 
    width: 97px; 
    height: 18px; 
    padding-top: 3px; 
    margin-top: 5px; 
    padding-bottom: 4px; 
    text-align: center; 
    font-family: 'Open Sans', sans-serif; 
    cursor: help 
}

的可能的复制（HTTP [我可以在CSS一个onclick效果？]：/ /stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css） – Michelangelo

好的。什么是最简单的jQuery可以做到这一点？ – rockyraw

答

使用jQuery的

<html><head> 
    <script src=path/to/jquery.js></script> 
    </head> 
    <body> 
    <button class=help_show>Show help</button> 
    <div class=help>Help text 
    <button class=help_close>X</button> 
    </div> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
    $('.help').fadeOut(0); 
    $('button.help_close').click(function (e) { 
    e.preventDefault(); 
    $('.help').fadeOut(); 
    }); 
    $('button.help_show').click(function (e) { 
    e.preventDefault(); 
    $('.help').fadeIn(); 
    }); 
}); 
    </script> 
    </body></html>

使CSS工具提示点击时打开（加上关闭按钮）

相关推荐