single element tooltips and talk bubbles with pure css

tooltip_talk_bubble.css

        .tooltip {
          position: absolute;
          text-align: center;
          display: inline-block;
          background: #FFF;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          -o-border-radius: 5px;
          -ms-border-radius: 5px;
          border-radius: 5px;

          border: 2px solid #5DADF5;
          padding: 10px;

          margin-top: -10px;
        }

        .tooltip:after {
          content: ".";
          display: block;
          position: absolute;
          bottom:-10px;
          left: 50%;
          margin-left: -7px;
          height: 0px;
          width: 0px;
          border-left:10px solid transparent;
          border-right:10px solid transparent;
          border-top:10px solid #FFF;
          font-size: 0px;
          text-indent: -999px;
        }

        .tooltip:before {
          content: ".";
          display: block;
          position: absolute;
          bottom:-13px;
          left: 50%;
          margin-left: -9px;
          height: 0px;
          width: 0px;
          border-left:12px solid transparent;
          border-right:12px solid transparent;
          border-top:12px solid #5DADF5;
          font-size: 0px;
          text-indent: -999px;
        }
        
        
        .talky {
          position: absolute;
          display: inline-block;
          background: #FFF;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          -o-border-radius: 5px;
          -ms-border-radius: 5px;
          border-radius: 5px;

          border: 2px solid #5DADF5;
          padding: 10px;

          margin-top: -10px;
        }

        .talky:after {
          content: ".";
          display: block;
          position: absolute;
          bottom:-15px;
          left: 20px;
          height: 0px;
          width: 0px;
          border-right:15px solid transparent;
          border-top:15px solid #FFF;
          font-size: 0px;
          text-indent: -999px;
        }

        .talky:before {
          content: ".";
          display: block;
          position: absolute;
          bottom:-20px;
          left: 18px;
          height: 0px;
          width: 0px;
          border-right:20px solid transparent;
          border-top:20px solid #5DADF5;
          font-size: 0px;
          text-indent: -999px;
        }

got the css triangle trick from -> http://davidwalsh.name/css-triangles