minimalist css callout/tooltips

http://cssdeck.com/labs/bv45bh6p has a pretty good, minimalist CSS callout. I got rid of the fixed height and shadows and just use the one direction I needed:

div.callout {
  width: 200px;
  display: none;
}

div.callout {
  background-color: #444;
  background-image: -moz-linear-gradient(top, #444, #444);
  position: absolute;
  top: 0.5em;
  left: 8em;
  color: #ccc;
  padding: 10px;
  border-radius: 3px;
  margin: 25px;
  min-height: 50px;
  border: 1px solid #333;
  z-index: 100;
}

.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}

.callout.bottom::before {
  left: 45%;
  top: -20px;
  border-bottom: 10px solid #444;
}

After whipping up a version of that (and having to have the onmouseover/onmouseout for both the triggering text and the callout itself it was pointed out to me that the bootstrap we use has a decent library for what it calls tooltips - it can be "onclick" ( the code is like 
$('[data-toggle="tooltip"]').tooltip({trigger:'click'});
) , it can be made to not escape  HTML,
data-html="true"
and you can style it with CSS - selector is
 .tooltip .tooltip-inner
And also it's pretty good that it fallsback gracefully using the html5 default "title" tooltip behavior