Tooltip with Image + Text different colours and add any HTML inside the DOM. Creating tooltips in Blogger was never that easy.

.tooltip{outline:none;text-decoration:none!important;border-bottom:2px dotted #0080ff;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{max-width:300px;width:290px;padding:10px 20px;opacity:0;bottom:170%;margin-left:-120px;visibility:hidden;z-index:10;position:absolute;font-family:Arial;font-size:12px;font-style:normal;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-90px}.tooltip span b{width:15px;height:15px;margin-left:20px;bottom:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{color:#fff;background:#222222 url(http://test.stcnetwork.org/wp-content/themes/swag/assets/images/patterns/overlay2-20.png);border:1px solid #ffffff}.tooltip span b{background:#222222 url(http://test.stcnetwork.org/wp-content/themes/swag/assets/images/patterns/overlay2-20.png);border-bottom:1px solid #ffffff;border-left:1px solid #ffffff} .tooltip:before {content: "\f05a";font-family: FontAwesome;padding:0px 5px;}