1. Technology

How to Create Anchor Tooltips Custom Shortcode in Minutes!

Tooltips are very useful in displaying information. These are small hover boxes that contain information about the text or item being hovered over. It appears without clicking the text, something which is very handy on your site. In some previous tutorial, I showed you how to create and customize anchor link tooltips to display information. In this one, you will learn how to create anchor tooltips custom shortcode.

With just a few lines of pure HTML and CSS3, it can be done. But isn’t it would be great if you can also integrate this on your WordPress site?

Great thing there is a solution for that: WordPress shortcode. Shortcodes are WordPress-specific code that lets you do nifty things with very little effort. By just inserting something inside square brackets, it will replace that content with some other content and usually being driven by a series of PHP functions.

In today’s tutorial, you will integrate the anchor tooltips that you’ve made on the previous tutorial to WordPress shortcode. Let’s start.

Note: If you want to understand in-depth understanding about shortcodes, you might want to check this tutorial regarding the Theme Options Shortcodes.

Resources You Need to Complete This Tutorial

Shortcodes Variation

Shortcodes comes with two variations. Additionally, shortcodes can be created with or without attributes.

Shortcode usually comes with this simplest version:

[tooltip]

The Shortcode API makes it easy to create shortcodes that support attributes like this:

[tooltip class="top_tooltip" title="This is a tooltip!"]
Tooltip Text
[/tooltip]

There are two steps involved in creating a shortcode

1. Building the Primary Handler Function
2. WordPress Hook for the Handler Function

Regardless of how dynamic or complicated your shortcode is, these steps are the foundation.

Building the Text Tooltip

STEP 1 – Creating the Shortcode file

You can place your shortcode snippets to plugins folder (on your theme directory) and then activate. But take note that it is commonly added on the functions.php file. However, for this tutorial, let’s create an additional file to keep the code clean without affecting the theme’s built in functions.

Go ahead and create shortcode.php file on your theme’s root directory.

short

STEP 2 – Building the Primary Handler Function

For this part of the tutorial, add the primary functions. Since tooltips can also contain images aside from just pure text, create two functions namely: tooltip and tooltip_image.

function tooltip(){
//Do something here
}
function tooltip_image(){
//Do something here
}

STEP 3 – Adding Attributes and Returning the Result

One of the great things about shortcode is that handlers are broadly similar to WordPress filters: they accept parameters (attributes) and return a result (the shortcode output).

There are three parameters that can be passed in to the shortcode callback function and they are the following:

  • $atts – an associative array of attributes, or an empty string if no attributes are given
  • $content – the enclosed content (if the shortcode is used in its enclosing form)
  • $tag – the shortcode tag, useful for shared callback functions

For this tutorial, you’re going to use the $atts and $content attribute to display your data. Basically the $atts will contain an array for your class, title and links and the content will refer to the item or text that these shortcodes will be wrap.

//Text Tooltip
function tooltip($atts, $content = ''){
$atts = shortcode_atts(
array(
'class' => '',
'title' => ''
), $atts);
}

//Image Tooltip
function tooltip_image($atts, $content = ''){
$atts = shortcode_atts(
array(
 'class' => '',
 'src' => ''
), $atts);
} 

Next, return your result using a variable $html, which will contain the content format.

//Text tooltip
function tooltip($atts, $content = ''){
$atts = shortcode_atts(
array(
'class' => '',
'title' => ''
 ), $atts);
$html = '<a class="' . $atts['class'] .'"  title="'. $atts['title']. '" href="#">' . $content . ' <span>' .$atts['title']. '</span> </a>';
return $html;
  }

//Image Tooltip
function tooltip_image($atts, $content = ''){
$atts = shortcode_atts(
array(
'class' => '',
'src' => ''
), $atts);

 $html = '<a class="' . $atts['class'] . '"  src="'.$atts['src'].'" href="#">' . $content . ' <span> <image src="'.$atts['src'].'" width="100" height="70"/> </span> </a>';
return $html;
  } 

STEP 4 – WordPressHook for the Handler Function

In order to execute the primary functions, you will tie it to WordPress’ initialization action. The name of the function will be the same to the name of the hook Shortcodes but feel free to change it to your preferred name.


//Text tooltip
function tooltip($atts, $content = ''){
$atts = shortcode_atts(
array(
'class' => '',
'title' => ''
), $atts);

$html = '<a class="' . $atts['class'] .'"  title="'. $atts['title']. '" href="#">' . $content . ' <span>' .$atts['title']. '</span> </a>';
return $html;
  }

add_shortcode('tooltip', 'tooltip');

//Image Tooltip
function tooltip_image($atts, $content = ''){
$atts = shortcode_atts(
array(
'class' => '',
'src' => ''
), $atts);

$html = '<a class="' . $atts['class'] . '"  src="'.$atts['src'].'" href="#">' . $content . ' <span> <image src="'.$atts['src'].'" width="100" height="70"/> </span> </a>';
	return $html;
  } 

add_shortcode('tooltip_image', 'tooltip_image');

STEP 5 – Testing the Shortcode

Now, with the CSS added from the previous tutorial regarding the CSS3 Anchor Tooltips and some new set of the same CSS for image_tooltip shortcode, let’s test the shortcodes.

Insert the following code on your page or posts if you want to display text tooltip:

[tooltip class="top_tooltip" title="Testing tooltip"]
Text here
[/tooltip]

And if you want an image tooltip use the following shortcode:

[tooltip_image src="your image link here"]
Text here
[/tooltip_image]

test

Conclusion

You did it! Now you can easily create all kinds of custom Shortcode functionality and integrate it into your WordPress site.

Hope you learned something on this tutorial and don’t forget to always check the WordPress Codex for changes in the rules in creating a shortcode.

Have you created the same shortcodes before? Share it with us on the comments section.

No Comments
Comments to: How to Create Anchor Tooltips Custom Shortcode in Minutes!

Recent Articles

Good Reads

Worlwide

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]

Trending

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
Singapore is recognised globally as a prime destination for foreign investors. Its business structure is well-developed, and its tax system is favourable to business owners. The government has a strong support system for entrepreneurs and provides legal protection for intellectual property rights. All of these conditions create an environment that is ideal for Singapore company […]
2020 has been a year that represents aggressive and sustained volatility with a confluence of unexpected situations, including economic shifts and market disturbance confluence. The COVID-19 pandemic forces businesses to adjust their methods of operations to ensure survival. These adjustments become the trajectory and guidance of what 2021 should look like and what companies should […]
COVID-19 pandemic has affected Thailand’s economy and labor market. World Bank’s Thailand Economic Monitor predicted that it would take Thailand over two years to return to its pre-COVID-19 growth and domestic product output levels. Although the country has successfully curbed the pandemic tide over the last few months, the economy remains severely hit. Nevertheless, heavily […]