This plugin allows enables response/mobile-friendly text-based tooltip/commentary popups.
Download
Description
This adds a responsive and mobile-friendly tooltip popup in the vein of this article. For an example (and an explanation why), please read the introductory article.
You can add a textual tooltip to anything simply by adding a rel="tooltip" and a title attribute with the tooltip content, just like you’d expect with regular HTML. It also supports shortcodes to generate them. Use the following shortcode:
| [commentary text="This is a tooltip"]This is the target text to be tip'd.[/commentary] |
(For backward compatibility reasons, any tags with class="commentary" title="tooltip" are similarly enabled.)
To use
Frequently Asked Questions
How do I make the fancy tooltips like the one in the demo?
Add the following lines to your theme’s functions.php:
| <?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' ); |
I can style my own tooltips. I don’t need the default or fancy stylesheet getting in the way.
Add the following line to your theme’s functions.php:
| <?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' ); |
The plugin’s css file will no longer be loaded.
I can’t see where my tooltips are?
The default stylesheet does not highlight tooltip targets in any way. To highlight them in a manner common to most tooltips, go into your theme’s style.css and add the lines
| [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; | |
| } |
Give me a shortcode button in the editor!
Maybe. I don’t use the editor. 😛
commentary is too hard to spell, I want a regular tooltip shortcode
By default, I didn’t want to override the tooltip shortcode as it would change/break ACE-based themes and other plugins that use it. If you want a normal tooltip, add the following line to your theme’s functions.php:
| <?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' ); |
Then you can use shortcodes in the form of [tooltip text="target"]content[/tooltip]. (Programmers note: this is in the init hook to load after theme files and such.)
How do I add stuff to the “theme’s functions.php or style.css
The best way is to install One-Click Child Theme and make a child theme of your blog’s theme. This will ensure that changes you make will not get overwritten when the parent theme is upgraded. Then simply navigate to Appearance > Editor in the WordPress admin panel. By default it will open your theme’s Stylesheet style.css and you can edit the functions.php by clicking on Theme Functions on the right side.
Issues
- No known issues
Thanks
To my designer friends who actually want to read my digressions.
One thought on “Terrys Commentary Plugin for WordPress”