Make CSS Tooltip open when clicked (Plus Close button)

Question

I have the following CSS Tooltip - See this fiddle.

Currently it shows when being hovered, and disappear when no longer being hovered.

How can I make it show when user Clicks it, and have inside a close button, so it will disappear when close button is clicked (but should appear once again when clicked again)?

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
}

Possible duplicate of [Can I have an onclick effect in CSS?](http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) — Michelangelo, Aug 30 '16 at 16:23

score 0 · Answer 1 · answered Aug 30 '16 at 16:50

Using 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>

Make CSS Tooltip open when clicked (Plus Close button)

1 Answers1