The title attribute is an HTML attribute that specifies additional information about an element. The user hovers the mouse over an element, and a tooltip may appear-a “hover-box” with information of the element hovered over. The tooltip is also known as an infotip or hint. The title attribute can be added to any element, but it is often used with “navigation menu,” “links,” and “images.” It can help guide the user, telling them what to expect from a particular link when the user hovers the mouse over the link and read the information displayed by the title attribute as a tooltip.
Similarly, when a user hovers the mouse over an image, the title attribute can provide additional information or the description of the image. We will be first discussing how to add title attributes in the WordPress navigation menu. WordPress offers the option of adding title attributes in the navigation menu, but it’s not visible by default and is hidden in the menu editor of the dashboard. Navigation Menu is a customizable menu in your WordPress Theme. It allows you to add Pages, Posts, Categories, and URLs to the menu.
how to add title attribute in WordPress navigation menus:
1. Login into your WordPress admin panel, then visit your dashboard. In the dashboard, hover your mouse over “Appearance” and select “Menus” from the drop-down list to open up the menu editor.
2. In the top right corner of the menu editor page, click on the “Screen Options.” It will expand the Screen Options elements.
3. In the top right corner of the menu editor page, click on the “Screen Options.” It will expand the Screen Options elements.
4. The screen options contain several checkbox elements— tick mark the “Title Attribute” property of the menu.
5. Now, In the menu editor, see the menu structure; it contains the menu items, i.e., pages of the navigation bar.
Click on the inverted triangle displayed at the end of every menu item to open up a drop-down list.
6. In the drop-down list, below the navigation label, you will find the title attribute text bar. In the text bar, write the information you want to display in the tooltip when the mouse hovers over that navigation item.
Do the same for all the menu items you want to add the title attribute.
how we can add a title attribute to a link or an image in WordPress:-
1. First, Login to your admin panel; Visit the dashboard and select the page or a blog you want to edit.
Select the text to which you want to add a link.
2. WordPress shows a set of editing options, click on the link symbol to paste or type a URL in the text box and press enter.
3. Now click on the three vertical dots, from the drop-down list, click on the “Edit as HTML.”
Click three vertical dot for edit as HTML
4. Suppose the text for which you want to add a link is “About page,” as an HTML code it will look like- <a href=”http://www.example.com”>About page</a>.
Now add title as title=”Any text you want to display as tooltip” as shown here- <a href=”http://www.example.com” title=”This is my about me page.”>About page</a>
5. Now update your changes, and when you hover the mouse over the link, the text you added as the title will appear as a tooltip.
How to add the title attribute to an image:-
Similarly, you can add the title attribute to an image by adding the title=”Any information you want to display as tooltip” in any HTML image tag.
For example, this is the HTML image tag:-
<img src=”/path/to/image/imagelink.jpg” width=”100″ height=”100″ alt=”Image to show how to add title attribute to an image”/>.
Alternate text (alt-text) helps to describe our image to search engines and browsers. The alternate text is displayed when an image is not found, or the browser is unable to load the image.
Just add title attribute next to the alt text as shown here-
<img src=”/path/to/image/imagelink.jpg” width=”100″ height=”100″ alt=”Image to show how to add title attribute to an image” title=”This image helps you see where to add title text for title attribute” />
That’s how you can add the title attribute to the navigation menu, links, and images in WordPress.