Code used in http://terrychay.com/wordpress-plugins/terrys-commentary
Terrys tooltip manual
<?php | |
// This changes the default css to use the included fancy stylesheet | |
function you_already_know($ignore) { | |
return 'fancy.css'; | |
} | |
add_filter( 'tccomment_default_css', 'you_already_know' ); | |
// This disabled the stylesheet. You'd roll your own in your theme's style.css | |
add_filter( 'tccomment_add_default_css', '__return_false' ); | |
// This adds a [tooltip] shortcode | |
add_filter( 'tccomment_add_tooltip_shortcode', '__return_true' ); |
[rel~="tooltip"] { | |
cursor: pointer; | |
border-bottom: 1px dashed #ccc; | |
} | |
/* These styles I am using to modify the TwentyFifteen theme */ | |
a.commentary { | |
/* hyperlinks have a very strong underline border already */ | |
background-color:rgba(83,162,137,0.15); | |
} | |
.commentary, [rel="tooltip commentary"] { | |
/* background: #e0ffea; /* minty! | |
background: #f0fffa; /* minty! */ | |
/* minty = f0fffa = 240, 255, 250 ~ avg(248) -9, +7 +2 (oscillate around 125*2 */ | |
/* background-color:rgba(83,162,137,0.15); */ | |
cursor: pointer; | |
border-bottom: 1px dashed rgba(83,162,137,0.8); | |
} | |
#tooltip { | |
font-size: 0.875em; | |
text-shadow: 0 1px rgba( 0, 0, 0, .5 ); | |
line-height: 1.5; | |
color: #fff; | |
background: #333; | |
background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) ); | |
background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); | |
background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); | |
background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); | |
background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); | |
background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
border-radius: 5px; | |
border-top: 1px solid #fff; | |
-webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); | |
-moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); | |
box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); | |
position: absolute; | |
z-index: 100; | |
padding: 15px; | |
} | |
#tooltip:after | |
{ | |
width: 0; | |
height: 0; | |
border-left: 10px solid transparent; | |
border-right: 10px solid transparent; | |
border-top: 10px solid #333; | |
border-top-color: rgba( 0, 0, 0, .7 ); | |
content: ''; | |
position: absolute; | |
left: 50%; | |
bottom: -10px; | |
margin-left: -10px; | |
} | |
#tooltip.top:after | |
{ | |
border-top-color: transparent; | |
border-bottom: 10px solid #333; | |
border-bottom-color: rgba( 0, 0, 0, .6 ); | |
top: -20px; | |
bottom: auto; | |
} | |
#tooltip.left:after | |
{ | |
left: 10px; | |
margin: 0; | |
} | |
#tooltip.right:after | |
{ | |
right: 10px; | |
left: auto; | |
margin: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment