Include a tooltip on every image by utilizing the title attribute

<br><img title="Cool as ninja!" src="/images/profile2.png" width="300"></br>
<br> <strong>Who's this pretty girl ninja!?</strong>
<br><img  title="Cool dude bro!" src="/images/profile5.png"></br>
<br> <strong>Incredible Hulk!</strong>
<br><img title="What's up bro, like my new car?" src ="https://images-na.ssl-images-amazon.com/images/G/01/VDP/9816_cc2400_001_PVG_cherokee_712x534._V291818945_.png" width="300">
<br><strong>This is a nice, fast, as well as strong car!</strong></br>

Code Avengers seems to think I haven't added the title attribute to each image, even though I have. Can someone please assist me with this issue?

Answer №1

$("img").on("mouseover",function(event){
 $(".tooltip").remove();
  Title=$(this).attr("title");
  $(this).removeAttr("title")
  let tooltip=$("<div/>",{class:"tooltip",html:Title,style:"left:"+event.pageX+"px;"+"top:"+event.pageY+"px;"});
  $(this).parent().append(tooltip);
  $(this).parent().find(".tooltip").fadeIn();
});
$("img").on("mouseleave",function(event){
 $(this).attr("title", Title)
 Title="";
 $(".tooltip").remove();
});
.tooltip{
position: absolute;
background-color:#000;
color:#fff;
padding:5px;
display:none;
 pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><img title="Cool as ninja!" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwE4cobK7ZLOS6mo2oE07NHNJLfxAcD9_NqdocEbmMWrMNj1fi" width="300"><br>
<br> <strong>Who's this pretty girl ninja!?</strong>
<br><img  title="Cool dude bro!" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRguGplqscctefh162YhLoMvnu398pKjyQ-2aJ8fFYNyunToDbB"><br>
<br> <strong>Incredible Hulk!</strong>
<br><img title="What's up bro, like my new car?" src ="https://images-na.ssl-images-amazon.com/images/G/01/VDP/9816_cc2400_001_PVG_cherokee_712x534._V291818945_.png" width="300">
<br><strong>This is a nice, fast, as well as strong car!</strong><br>

Answer №2

It seems like your issue lies in the correct utilization of the alt and title attributes.

The Importance of the Title Attribute

The title attribute is a versatile attribute that can be applied to all elements. While it has specific meanings for certain elements such as the abbr element, the general definition states:

The title attribute provides advisory information for the element […]

Understanding its defined use cases is crucial to ensuring proper application.

Key Details About the Alt Attribute

The alt attribute, on the other hand, is restricted to the area, input (for image buttons), and img elements. For img specifically, it serves as:

A fallback content for the img element, offering equivalent information for users unable to view images or with image loading disabled.

Maintaining adherence to usage guidelines is essential when working with this attribute.


Learn more here

<br><img alt="Cool as ninja!" title="Cool as ninja!" src="/images/profile2.png" width="300"></br>
<br> <strong>Who's this pretty girl ninja!?</strong>
<br><img alt="Cool dude bro!" title="Cool dude bro!" src="/images/profile5.png"></br>
<br> <strong>Incredible Hulk!</strong>
<br><img alt="What's up bro, like my new car?"  title="What's up bro, like my new car?" src ="https://images-na.ssl-images-amazon.com/images/G/01/VDP/9816_cc2400_001_PVG_cherokee_712x534._V291818945_.png" width="300">
<br><strong>This is a nice, fast, as well as strong car!</strong></br>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to show the selected values of dropdown and checkboxes on a redirected page for confirmation using PHP?

<form action="action.php" method="POST" target="_self"> <table class="main" border="1" height="100%" align="center">t; <h3> <p id="id1" style="background-color: #9FF" >Registration form</p></h3> <tr><t ...

Java Function for Cleaning HTML Id Attributes

Looking for a more elegant solution to sanitize HTML ID attributes? /** * * HTML 4 Specification * ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number * of letters, digits ([0-9]), hyphens ("-"), underscores (" ...

Is there a way to store a SAFEARRAY (an array of bytes) into an HTML hidden field?

Is there a way to extract an array of bytes from an active-x component, save it in an html-form input hidden field, and then send it to the server using form-submit? I'm not sure how to accomplish this. MIDL: HRESULT Data([out, retval] SAFEARRAY(VAR ...

Unable to adjust the size of a DIV with a button click in Vue3

I am having trouble resizing a DIV block in Vue3. Whenever I click the button, I receive an error message saying "Cannot read properties of undefined (reading 'style')". I know there is an issue with the JS part of the code, but I'm not sure ...

Sometimes the Navbar options fail to show up consistently on the Navbar bar

I recently launched my website at campusconnect.cc Unfortunately, I've noticed that when resizing the window, the navbar options are shifting up and down. Can anyone help me identify the issue and provide guidance on how to resolve it? ...

The container is not adjusting to the screen size correctly and the flex-direction: row is not functioning as

Struggling with setting up a basic layout in Angular for my application. While I have experience with Angular, the actual HTML/CSS design is new to me. No matter what I try, I can't seem to get this container to take up the whole screen width. Variou ...

Position filter forms on the left side to align with bootstrap cards

I'm having trouble aligning the cards using Bootstrap's row and col- classes. The first three are behaving as expected, but the fourth one isn't cooperating. Any idea why this might be happening and any solutions you can suggest? View the i ...

At what point does a box create an inline formatting context?

According to my research, I came across a situation where a block formatting context is generated as explained in MDN:Block formatting context. I am curious about the scenarios that lead to the establishment of an inline formatting context within a box. ...

Clear out the classes of the other children within the identical parent division

I'm currently in the process of replacing my radio circles with div elements. I've successfully implemented the functionality for selecting options by clicking on the divs, as well as highlighting the selected div. However, I'm facing trou ...

Displaying the Ionic loading spinner on the entire page rather than a restricted small box

Right now, I'm able to implement a basic loading effect, but it appears as a small box. presentCustomLoading() { let loading = this.loadingCtrl.create({ content: 'Loading Please Wait...' }); loading.present(); } However, I ...

Central AJAX spinner

I am having trouble centering the ajax loader. Currently, it is appearing in the right corner of the screen instead. Any help is appreciated. Below you can find the code snippet: div.amshopby-overlay { background-color: #fafafa; height: 100%; ...

Animate the sliding of divs using the JavaScript animation function

I've designed some boxes that function similar to notifications, but now I want to smoothly slide them in from the left instead of just fading in. I know that I need to use .animate rather than .fadeIn to achieve this effect. The code snippet I&apos ...

Tips for storing images in a database using PHP

After writing image upload files, I encountered an error stating "Undefined index: image in C:\xampp\htdocs\Schmgt\svr\upload_image.php on line 3". Despite thoroughly reviewing my code, I am unable to find any issues. Any assistanc ...

Aligning a picture at the center of the screen with CSS - Various screen and image sizes

For my project, I need to design a web page with a single image perfectly centered both vertically and horizontally on the screen. Here are the specific requirements: The client's screen size is unknown (mobile) The image will be user-defined with u ...

Combining CSS to Align Two Form Fields Side by Side

I recently came across an online form and I'm attempting to customize it by aligning the phone and email text fields next to each other. I have made some progress, but the formatting is not quite right. The fields are too small and adjusting their siz ...

How can I modify the appearance of the bootstrap scrollbar with scrollspy?

I'm struggling to modify the color of the scrollbar in Bootstrap scrollspy despite having a functional scrollbar. Here is an example of my code: HTML: <body> <div class="container, scrollbar" id="myScrollspy"> <div class=" ...

Show only the present y-coordinate in the ToolTip of a chart.js

I am currently working on developing a chart using Chart.js, and my goal is to only show the y-axis value in the tooltip. The current display shows: date name_of_line: measurement example: Jan 1, 2020, 8:00:00 AM 5th Percentile: 100 oz. However, I would ...

Symfony 2 can be configured to add a "data-*" attribute to each radio input field in a form entity

Within my form, I have a field named "membership" that displays radio buttons. Here is the code snippet: ->add( 'membership', 'entity', array( 'class' => 'Comit ...

Adjust the Bootstrap Navbar by positioning one navigation item to the right side

I want to align the logout button to the right within my bootstrap navbar. https://i.stack.imgur.com/PDvSv.png Here is a demonstration of the current behavior: https://codepen.io/agrawalo/pen/mdbKYLX Code: <nav class="mb-1 navbar navbar-expand-sm na ...

Having difficulty accessing the verification button within an iframe using Selenium

I'm currently developing a program that allows users to login using Selenium and bypass verification. I have everything else in the program ready, but I've been facing an issue trying to click the verify button. I've tried different approach ...