<div class="item">

            <h1>A</h1>

            <div class="tooltip">

                <p>Take a look at our crew and become a friend.</p>

                <div class="arrow"></div>

            </div>

        </div>

        <div class="item">

            <h1>C</h1>

            <div class="tooltip">

                <p>Explore our process and see how we can help.</p>

                <div class="arrow"></div>

            </div>

        </div>

.item  {width:100px;

        height:100px;

        margin:15px;

        background:#73a058;

        float:left;

        border-radius:50px;}

h1    {font-family:'HeydingsCommonIconsRegular', sans-serif;

       font-weight:normal;

       margin:30px 0 0 0;

       color:#fff;

  text-align:center;

       font-size:60px;

       line-height:30px;}

.tooltip p { font-family: sans-serif;

             font-size:14px;

  font-weight:;}

.tooltip { width:120px;

           padding:10px;

           border-radius:3px;

           position:absolute;

           box-shadow:1px 1px 10px 0 #ccc;

           margin: -500px 0 0 -20px;

           background:#fff;

           -webkit-transition:margin .5s ease-in-out;            //样式属性过渡  （CSS 属性的名称，成过渡效果需要多少秒或毫秒），
                                                                  ease-in-out 由慢到快再到慢

          -moz-transition:margin .5s ease-in-out;}

.item:hover  {  background:#6d643b;}

.item:hover .tooltip {

           margin:-145px 0 0 -20px;

           transition:  margin .15s ease-in-out;

           -webkit-transition: margin .15s ease-in-out;

  -moz-transition: margin .15s ease-in-out;}

.arrow {

  position:absolute;

  margin:10px 0 0 50px;

    width:;

    height:;

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-top: 10px solid #fff;

}