HTML
CSS
JavaScript

HTMLで吹き出し風のTipsみたいなのを表示する

吹き出し風の画面を Android の Toast みたいなノリで表示したかったので、
調べたことを整理がてらメモします。

開発環境及び動作環境

  • OS: Windows 7 x64
  • Browser: Chrome 61.0.3163.79

DEMO

DEMO

吹き出しを作る

まずは CSS で吹き出しを作ります。

style.css
.balloon-left {
    position: absolute;
    display: inline-block;
    margin-left: 20px;
    padding: 7px 10px;
    min-height: 40px;
    min-width: 120px;
    line-height: 40px;
    background: #5cc507;
    box-shadow: -4px 4px 8px -1px #999999;
}

.balloon-left:before{
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #5cc507;
}

.balloon-left p {
    margin: 0;
    padding: 0;
}

それをHTMLに設定します。

index.html
<button id="button">SHOW</button>
<div id="balloon-tips" class="balloon-left">
  <p>吹き出し風Tips</p>
</div>

フェードイン/フェードアウト

CSS でアニメーションを作ります。

style.css
.fadein {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.fadein.visible {
    opacity: 1;
    visibility: visible;
}

それをタグに適用します。

index.html
  <button id="button">SHOW</button>
- <div id="balloon-tips" class="balloon-left">
+ <div id="balloon-tips" class="balloon-left fadein">
    <p>吹き出し風Tips</p>
  </div>

ボタンを押した時に表示されるようにする

あとは、jQueryなり何なりで、クリック処理とclassのON/OFFを行います。

main.js
$(function() {
  var timer;
  $("#button").on("click", function() {
    clearTimeout(timer);
    $("#balloon-tips").toggleClass("visible");
    timer = setTimeout(function() {
      $("#balloon-tips").toggleClass("visible");
    }, 3000);
  });
});

完成

DEMO
https://github.com/chibi929/chibi-html

参考サイト

CSS3でフェードイン・フェードアウトするダイアログ