TOOLTIP TONIC: FOR ALL SPLAIN PAIN

dabblet.css

/**
 * TOOLTIP TONIC: FOR ALL SPLAIN PAIN
 */

/*{{{ Meetstrap*/
html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,body{font-size:12px;color:#555;line-height:1.5;margin:0;padding:0}body,button,input,select,textarea{font-family:Verdana,Geneva,Tahoma,sans-serif}abbr,strong,acronym,span,small,time,strike,sub,sup,a{display:inline;font-family:inherit}abbr,acronym{border-width:0}b,strong{font-weight:bold}i,em{font-weight:normal}sup,sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}small{font-size:11px}p,ul,ol,li blockquote,form,fieldset,legend,table,dl,dd,article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{margin:0;padding:0;margin-bottom:12px;font-family:inherit}form,legend{margin-bottom:0}img{margin:0;padding:0;border:0}img.resample{-ms-interpolation-mode:bicubic;image-rendering:optimizeQuality}ul,ol{list-style-position:outside;padding-left:2.75em}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;display:inline-block;zoom:1;*display:inline}a:link,a:visited{text-decoration:none;color:#3987cb}a:hover,a:active{text-decoration:none;color:#3987cb}h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:normal;color:#222;margin:0;padding:0;padding-bottom:6.4px;line-height:1.1}h1{font-weight:bold;font-size:2.5em;letter-spacing:-0.75px}h2{font-weight:bold;font-size:2em;letter-spacing:-0.5px}h3{font-weight:bold;font-size:1.6666em}h4{font-weight:normal;font-size:1.5em}h5{font-weight:normal;font-size:1.25em}h6{font-weight:bold;font-size:1em}label{margin-right:1em}table{width:100%;font-size:12px;border-collapse:collapse}caption,td,th{padding:8px;line-height:16px;text-align:left}caption{vertical-align:middle;padding-left:0}th{font-weight:bold;vertical-align:middle}td,tbody th{vertical-align:top;border-top:1px solid #ddd}.borderedTable{border:1px solid #ddd}.borderedTable th+th,.borderedTable td+td,.borderedTable th+td{border-left:1px solid #ddd}.stripedTable tbody tr:nth-child(odd) td,.stripedTable tbody tr:nth-child(odd) th{background-color:#f7f7f7}.leading-top{padding-top:12px}.leading-bottom{padding-bottom:12px}.margin-top{margin-top:12px}.margin-bottom{margin-bottom:12px}.margin-none{margin:0}.padding-none{padding:0}.align-right{text-align:right}.align-left{text-align:left}.align-center{text-align:center}.display-none{display:none}.hidden{display:hidden}.block{display:block}.inline{display:inline}.muted{color:#999}.bold{font-weight:bold}.caps{text-transform:uppercase}.small,small{font-size:.85em}.opacity-quarter{opacity:.25;-ms-filter:alpha(opacity=25);filter:alpha(opacity=25)}.border-none{border-width:0!important}.resetList{margin:0;padding:0;list-style-type:none}.inlineList,.pipeList,.crumbList{padding-left:0}.inlineList>li,.pipeList>li,.crumbList>li{display:inline;list-style:none}.pipeList>li{margin-right:.5em;padding-right:.5em;border-right:1px solid}.pipeList>li:last-child,.pipeList>li.last{border-right-width:0}.crumbList>li{margin-right:.75em}.crumbList>li:after{content:'>';margin-left:.75em}.crumbList>li:last-child:after,.crumbList>li.last:after{margin-left:0;content:''}.dividedList,.paddedList{list-style:none;padding:0;margin:0}.dividedList>li,.paddedList>li{margin:0;padding:12px 12px 0;border-top:1px solid #eee}.paddedList>li{padding:6px 0 0 0;border-width:0}.doc-content>.dividedList>li{padding-left:0;padding-right:0}.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0!important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x "}.line{*zoom:1}.unit{float:left;min-height:1px}.size1of1{float:none}.size1of2{width:50%}.size1of3{width:33.33333%}.size2of3{width:66.66666%}.size1of4{width:25%}.size3of4{width:75%}.size1of5{width:20%}.size2of5{width:40%}.size3of5{width:60%}.size4of5{width:80%}.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px}.size1of7{width:14.28571%}.size2of7{width:28.57142%}.size3of7{width:42.85713%}.size4of7{width:57.14284%}.size5of7{width:71.42855%}.size6of7{width:85.71426%}.gutter-left{margin-left:16px}.gutter-right{margin-right:16px}.span-25{width:25%}.span-30{width:30%}.span-50{width:50%}.span-60{width:60%}.span-75{width:75%}.doc-box{-moz-border-radius:4px 4px 4px 4px;-webkit-border-radius:4px 4px 4px 4px;border-radius:4px 4px 4px 4px;background-color:#fff;margin-bottom:16px}.doc-box>.doc-content:first-child{border-top:0;-moz-border-radius-topleft:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;border-top-right-radius:4px}.doc-box>.doc-content:last-child{-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.doc-box .doc-content{border-top:1px solid #ddd}.doc-box>.line>.unit{float:none;border-right:1px solid #ddd;display:table-cell;vertical-align:top}.doc-box>.line>.lastUnit{border-right:0;vertical-align:top}.doc-box>.line .doc-content{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}.doc-box>.line .unit:first-child .doc-content:first-child{-moz-border-radius-topleft:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px}.doc-box>.line .unit:first-child .doc-content:last-child{-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px}.doc-box>.line .unit:last-child .doc-content:first-child,.doc-box>.line .lastUnit .doc-content:first-child{-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;border-top-right-radius:4px}.doc-box>.line .unit:last-child .doc-content:last-child,.doc-box>.line .lastUnit .doc-content:last-child{-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.ie6 .doc-box .line .unit,.ie7 .doc-box .line .unit{float:left!important}.doc-content{padding:12px;padding-bottom:0;border-bottom:1px solid transparent}.doc-content.footer{background:#eee;-moz-border-radius:0 0 4px 4px 0;-webkit-border-radius:0 0 4px 4px 0;border-radius:0 0 4px 0}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}.clear-both{clear:both}.rounded-top{-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.rounded-bottom{-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rounded-all{-moz-border-radius:4px 4px 4px 4px;-webkit-border-radius:4px 4px 4px 4px;border-radius:4px 4px 4px 4px}.doc-content-notice{background:#ddd;position:relative}.close-me{position:absolute;top:12px;right:12px;display:block;background:url("//img1.dev.meetupstatic.com/img/ui-dialog-close.png") no-repeat top left;width:14px;height:14px;cursor:pointer;*cursor:hand;opacity:.5;-ms-filter:alpha(opacity=50);filter:alpha(opacity=50)}.close-me:hover{opacity:1;-ms-filter:alpha(opacity=100);filter:alpha(opacity=100)}.doc-content-into,.doc-content-outof{position:relative}.doc-content-into:before,.doc-content-into:after,.doc-content-outof:before,.doc-content-outof:after{content:' ';position:absolute;left:16px;border-left:8px solid transparent;border-right:8px solid transparent;display:block}.doc-content-outof:before{top:-9px;border-bottom:8px solid #ddd}.doc-content-outof:after{top:-8px;border-bottom:8px solid white}.doc-content-into:before{top:0;border-top:8px solid #ddd}.doc-content-into:after{top:-1px;border-top:8px solid white}.figureset,.figureset-right{*zoom:1}.figureset:after,.figureset-right:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;height:0}.figureset .figureset-figure,.figureset .figureset-description{display:table-cell;vertical-align:top}.figureset .figureset-description{width:auto;padding-left:12px;min-width:99%}.figureset-right .figureset-figure{float:right}.figureset-right .figureset-description{float:left;padding-right:12px;padding-left:0;min-width:70%;width:70%}.ie6 .figureset .figureset-figure,.ie6 .figureset .figureset-description,.ie7 .figureset .figureset-figure,.ie7 .figureset .figureset-description{float:left}.ie6 .figureset .figureset-description,.ie7 .figureset .figureset-description{min-width:75%;width:75%}.cardList{padding:12px 0 0;list-style:none;vertical-align:top;margin:0;font-size:0}.cardList>li{font-size:12px;margin:0 0 12px 12px;padding:0;background:#f7f7f7;border:1px solid #fff;-moz-box-shadow:rgba(0,0,0,0.35) 0 0 1px 0;-webkit-box-shadow:rgba(0,0,0,0.35) 0 0 1px 0;-o-box-shadow:rgba(0,0,0,0.35) 0 0 1px 0;box-shadow:rgba(0,0,0,0.35) 0 0 1px 0;display:inline-block;zoom:1;*display:inline;vertical-align:top;width:223px}.cardList>li .doc-content{border-top-color:#eee}.cardList>li .doc-content:first-child{border-top:0}.nav-tabs{padding-top:6px;padding-left:6px;border-bottom:1px solid #ddd;list-style:none;zoom:1}.nav-tabs:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.nav-tabs li{float:left;padding:0;margin-right:6px;margin-bottom:-1px}.nav-tabs a{display:block;text-decoration:none;color:#111;background-color:#eee;padding:6px 12px;opacity:.65;-ms-filter:alpha(opacity=65);filter:alpha(opacity=65)}.nav-tabs a:focus{outline-width:0;border-width:0}.nav-tabs a img{margin-top:-5px}.nav-tabs .selected a{opacity:1;-ms-filter:alpha(opacity=100);filter:alpha(opacity=100);border:1px solid #ccc;border-bottom-width:0;background-color:#fff}.nav-tabs .tabcount{color:#888}#lma .tabsNav{border-bottom:0;background-color:#e9ebe5}.nav-pagination{list-style-type:none;margin-bottom:16px;zoom:1}.nav-pagination:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.nav-pagination a{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;border:1px solid #ddd;border-left-width:0;font-size:1.08em;padding:.4em 1em;display:block;background:#fff;-moz-box-shadow:none;-webkit-box-shadow:none;-ms-box-shadow:none;box-shadow:none}.nav-pagination a:hover{background-color:#eee}.nav-pagination a[rel=prev]:before{content:"\2190";margin-right:.5em}.nav-pagination a[rel=next]:after{content:"\2192";margin-left:.5em}.nav-pagination li{float:left}.nav-pagination li:first-child a{border-left-width:1px;-moz-border-radius-topleft:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px}.nav-pagination li:last-child a{-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.nav-pagination li.selected a{font-weight:bold;font-weight:500;letter-spacing:.04em;background-color:#3987cb;color:#fff!important;background:#4d93d0;background-image:-webkit-gradient(linear,left top,left bottom,from(#2264a0),to(#4d93d0));background-image:-moz-linear-gradient(top,#2264a0,#4d93d0);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr='#2264a0',endColorstr='#4d93d0');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2264a0', endColorstr='#4d93d0')"}.nav-appendPager{-moz-border-radius:4px 4px 4px 4px;-webkit-border-radius:4px 4px 4px 4px;border-radius:4px 4px 4px 4px;border:1px solid #ddd;display:block;text-align:center;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.08em;font-weight:bold;font-weight:500;letter-spacing:.04em;color:#3987cb;padding:.5em 0;margin-bottom:16px;cursor:pointer;*cursor:hand}.nav-appendPager:hover{background-color:#eee}.nav-appendPager:active{font-weight:bold;font-weight:500;letter-spacing:.04em;background-color:#3987cb;color:#fff!important;background:#4d93d0;background-image:-webkit-gradient(linear,left top,left bottom,from(#2264a0),to(#4d93d0));background-image:-moz-linear-gradient(top,#2264a0,#4d93d0);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr='#2264a0',endColorstr='#4d93d0');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2264a0', endColorstr='#4d93d0')"}.nav-buttons{list-style-type:none;margin-bottom:16px;padding-left:0;line-height:1.5;zoom:1}.nav-buttons:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.nav-buttons a{background-color:white;background:#e6e6e6;background-image:-webkit-gradient(linear,left top,left bottom,from(white),to(#e6e6e6));background-image:-moz-linear-gradient(top,white,#e6e6e6);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr='white',endColorstr='#e6e6e6');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#e6e6e6')";font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;border:1px solid #c4c4c4;border-left-color:#fff;color:#555!important;font-size:1.08em;padding:.4em 1em;display:block}.nav-buttons a:hover{background:#d1d1d1;background-image:-webkit-gradient(linear,left top,left bottom,from(white),to(#d1d1d1));background-image:-moz-linear-gradient(top,white,#d1d1d1);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr='white',endColorstr='#d1d1d1');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#d1d1d1')"}.nav-buttons a:active{background:#e6e6e6;-moz-box-shadow:#999 1px 1px 0 0 inset;-webkit-box-shadow:#999 1px 1px 0 0 inset;-o-box-shadow:#999 1px 1px 0 0 inset;box-shadow:#999 1px 1px 0 0 inset}.nav-buttons li{float:left}.nav-buttons li:first-child a{-moz-border-radius-topleft:2px;-webkit-border-top-left-radius:2px;border-top-left-radius:2px;-moz-border-radius-bottomleft:2px;-webkit-border-bottom-left-radius:2px;border-bottom-left-radius:2px;border-left-color:#c4c4c4}.nav-buttons li:last-child a{-moz-border-radius-topright:2px;-webkit-border-top-right-radius:2px;border-top-right-radius:2px;-moz-border-radius-bottomright:2px;-webkit-border-bottom-right-radius:2px;border-bottom-right-radius:2px;border-right-width:1px}.nav-buttons li.selected a{font-weight:bold;font-weight:500;letter-spacing:.04em;background-color:#3987cb;color:#fff!important;background:#4d93d0;background-image:-webkit-gradient(linear,left top,left bottom,from(#2264a0),to(#4d93d0));background-image:-moz-linear-gradient(top,#2264a0,#4d93d0);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr='#2264a0',endColorstr='#4d93d0');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2264a0', endColorstr='#4d93d0')";border-left:0}.tearsheet,.tearsheet-25,.tearsheet-80{font-family:'helvetica neue',arial;display:inline-block;text-align:center;margin-bottom:12px;-moz-border-radius:2px 2px 2px 2px;-webkit-border-radius:2px 2px 2px 2px;border-radius:2px 2px 2px 2px;width:40px;height:40px}.tearsheet .month,.tearsheet-25 .month,.tearsheet-80 .month{display:block;background:#e6304c;color:#fff;-moz-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0}.tearsheet .day,.tearsheet-25 .day,.tearsheet-80 .day{display:block;font-weight:bold;border:1px solid #ddd;border-width:0 1px 1px;-moz-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;background:#f7f7f7}.tearsheet .month,.tearsheet-25 .month,.tearsheet-80 .month{font-size:11px;height:16px;line-height:16px}.tearsheet .day,.tearsheet-25 .day,.tearsheet-80 .day{line-height:24px;font-size:16px}.tearsheet-25{width:25px;height:25px}.tearsheet-25 .month{font-size:7px;height:10px;line-height:10px}.tearsheet-25 .day{line-height:15px;font-size:10px}.tearsheet-80{width:80px;height:80px}.tearsheet-80 .month{font-size:22px;height:32px;line-height:32px}.tearsheet-80 .day{line-height:48px;font-size:32px}
/* }}} */

.tooltip,
.tooltip-left {
	background: #333;
	border-bottom: 1px solid transparent; /*prevent margin collapse */
	color: #efefef;
	min-width: 120px;
	max-width: 320px;
	min-height: 30px;
	padding: 1em 2.25em 0em 1em;
	line-height: 1.3;
	position: relative;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	opacity: 0.98;
}

.tooltip:before,
.tooltip-left:before {
	content: " ";
	display: block;
	width: 0;
	height: 0;
    border-right: 10px solid #333;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left-width: 0px;
	position: absolute;
	left: -10px;
	top: 10px;
	z-index: 9999;
}
.tooltip:after,
.tooltip-left:after {
	content: "x";
	font-size: 14px;
	display: block;
	text-align: center;
	width: 14px;
	height: 14px;
	position: absolute;
	top: 1px;
	right: 6px;
	opacity: 0.75;
	cursor: pointer;
} 

/*left variation*/
.tooltip-left {
	padding: 1em 1em 0em 2.5em;
}
.tooltip-left:before {
    border-right-width: 0px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #333;
	left: auto;
	right: -10px;
}
.tooltip-left:after {
	right: auto;
	left: 6px;
}

dabblet.html

<!-- content to be placed inside <body>…</body> -->


<blockquote class="tooltip" style="margin-top: 65px;">
	<p>i have a helpful tip for you!</p>
</blockquote>


<blockquote class="tooltip-left">
	<p>Ut jean shorts commodo dreamcatcher four loko. Pour-over bicycle rights nisi banh mi delectus accusamus ullamco kogi iphone, aute stumptown. Gentrify placeat leggings, ut master cleanse 8-bit narwhal aliqua letterpress mlkshk shoreditch terry richardson. Culpa vero incididunt consectetur anim, banksy keytar put a bird on it. Vero cardigan jean shorts mumblecore lomo. Incididunt gastropub nesciunt lomo swag. Officia chambray nulla, wes anderson sint odd future stumptown food truck pitchfork.</p>
</blockquote>


<blockquote class="tooltip">
	<ol>
		<li>Make a blockquote element</li>
		<li>Put content in it</li>
		<li>Add the class <code>.tooltip</code> or <code>.tooltip-left</code></li>
		<li>Add some javascript magic?</li>
	<ol>
</blockquote>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"","page":"html"}