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
  • The Hidden WordPress Options Panel

    The Hidden WordPress Options Panel

    Reading time: 1 minute

    Did you know that there’s a hidden options panel in WordPress? It’s one page you can visit that will allow you to set every single option available to you on your site – even some of the hidden ones that are set via plugins and/or other functions.

    WordPress
  • Better Know a WordPress Tag: ‘siteurl’

    Better Know a WordPress Tag: ‘siteurl’

    Reading time: 1 minute

    When you’re working on a development site it’s hard to set things up correctly because you know you’re going to change the site, and putting in elements that are more than likely “stationary”, such as links, will have to be changed, and that causes un-necessary headache when it comes time to move the site live. …

    WordPress
  • Home
  • About
  • Speaking
  • Articles
  • Contact