Skip to content

ENGINEERING LEADER

WordPress Developer

Speaker

Unapologetic Punk

Mitch Canter

  • Threads
  • Instagram
  • Bluesky
  • LinkedIn
  • GitHub
  • YouTube
WordPress

Easy Javascript ToolTips in WordPress

Mitch Canter

Reading time: 1 minute

A client needed a simple way to preserve real estate on the sidebar, but still have the ability to display their policies at a quick glance.  I found a plugin on the repository that uses the TipTip jquery script and condenses it down into a simple-to-use shortcode (complete with button on the editing screen).

The plugin is called “WordPress Tooltip“, and can be downloaded from the repository.

Usage

Usage is dirt simple: Simply use the button located in the editor screen, and fill out the options it gives you.  You can also add tooltips by using the following shortcode (which the button generates):

[code]

[tooltip content=”This will show in a tooltip” url=”This will make tooltip a link”]Hover over me for tooltip[/tooltip]

[/code]

Styling

You can style the code using the #tiptip_content ID… an example would be:

[code]

#tiptip_content{
font-size: 14px !important;
width: 400px;
padding: 15px !important;
line-height: 22px;
}

[/code]

Bonus: Using a Shortcode in a Widget

“But Mitch,” you may say, “You said you got that to work in their sidebar widgets… when I try to paste the code in, nothing happens.” Take heart, friend, and simply add this code into your functions.php file:

[code]

add_filter(‘widget_text’, ‘do_shortcode’);

[/code]

Now, any shortcode can be added to a text widget and will resolve itself to the correct code.

JavaScript, jQuery, plugin, tiptip_content, tooltip, WordPress
  • Redirection: An Easy Way to Handle 301 Redirects

    Redirection: An Easy Way to Handle 301 Redirects

    Reading time: 3 minutes

    Since I’ve switched to my new design, I’ve also done quite a bit of cleanup work on the content side of things.  I pruned a lot of old articles that weren’t bringing in search traffic (and weren’t related to the site anymore), cleaned up a lot of the categories, and set my permalink structure to…

    Tutorial, WordPress
  • How to Add Rainbow Text To WordPress

    How to Add Rainbow Text To WordPress

    Reading time: 1 minute

    I’ve been tinkering with the theme on this website, and I’m been very happy with how things have come out. I have a soft spot for gradients, especially with the ‘punk’ color scheme I’ve been using on my branding. One question I get, consistently: “How can I achieve the rainbow gradient text effect”? It’s actually…

    Design, Tutorial, WordPress
  • Home
  • About
  • Speaking
  • Articles
  • Contact