Add a tooltip to each image using the title attribute

Question

<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 keeps saying I need to put title to each image. When I have already done that. Please help.

What do you mean, added 24 characters in body? I am new to HTML and CSS — NeoAstro, Sep 19 '17 at 07:39
@kukkuz took the time to format your code to be readable as code here. You should take a little time and explore the formatting options and taking the [tour] wouldn't hurt either. — Filburt, Sep 19 '17 at 07:41
You should mention that in your post - we're not mind readers and didn't look over your shoulder while you tried a gazillion things that didn't work. — Filburt, Sep 19 '17 at 07:46
@Filburt I tried the code like this:
but it keeps saying the same thing, "Add a tooltip to each image using the title attribute. — NeoAstro, Sep 19 '17 at 07:49
Can you explain better what you want' Put an editable code please — Trip Therapy, Sep 19 '17 at 07:51
@TripTherapy I want to be able to put tooltip to the images, but the problem is I have already done that, but from where I am coding is codeavengers.com keep saying that I need to add tooltips to each images using the title attritubutes. — NeoAstro, Sep 19 '17 at 07:54
We still have no clue who or what this nagging "It" is, but since all the `img` in your sample code clearly have the required `title` attribute maybe you just missed one `img` in your actual code. If you cannot tell who/what is validating and rejecting your code, we'll not be able to reproduce your problem. — Filburt, Sep 19 '17 at 07:57
@Filburt Sorry for the confusion, but the "it" that I keep mentioning is that the phone in Code Avengers, basically whatever you put in your code is showed on that phone. — NeoAstro, Sep 19 '17 at 08:00

Farhad Bagherlo · Answer 1 · 2017-09-19T08:15:25.743

$("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>

Nice example but unlikely to solve the OP's problem of getting his code submitted to Code Avengers validated. — Filburt, Sep 19 '17 at 10:37
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. — Donald Duck, Sep 19 '17 at 13:44

Trip Therapy · Answer 2 · 2017-09-19T08:27:58.697

0

I think your problem is about the using of alt and title.

title

The title attribute is a global attribute, which means that you can use it on all elements. In general (note that one some elements (e.g. the abbr element) it has a special meaning) it is defined as:

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

You should read the definition of the attribute, it explains how it should (not) be used.

alt

The alt attribute can only be used on the area, input (for image buttons) and img element. For img, it has this meaning:

the value of the alt attribute is the img element’s fallback content, and provides equivalent content for users and user agents who cannot process images or have image loading disabled.

There are many rules how you should (not) use this attribute.

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>

edited Sep 19 '17 at 08:27

answered Sep 19 '17 at 08:01

Trip Therapy

307
5
16

the phone keeps saying the same thing which is "Try again Add a tooltip to each image using the title attribute" – NeoAstro Sep 19 '17 at 08:10
Do you mean this one?

Who's this pretty girl ninja!?

Incredible Hulk!

This is a nice, fast, as well as strong car! – NeoAstro Sep 19 '17 at 08:23
This one is the original and you have to add the tooltip by title attribute? – Trip Therapy Sep 19 '17 at 08:24
Yes, and I have already done the tooltip that you told me to do, as well as other people's suggestion by those solutions just seemed to not work – NeoAstro Sep 19 '17 at 08:27
copy and paste this new solution, use title and alt together maybe works ^^ – Trip Therapy Sep 19 '17 at 08:29
Ok bro this is going a little confusing, I want to show you the actual picture of what's going on, how do I send you the picture? – NeoAstro Sep 19 '17 at 08:35
These solutions are not working my friend, either that or, maybe I have other codes that are also like this as well. – NeoAstro Sep 19 '17 at 09:56
Nevermind, I have already answered my own question, I just had to delete some code in my code, as there was too much code. So, for all of the people who gave me solution worked as well. Thank you all. – NeoAstro Sep 19 '17 at 21:07

Add a tooltip to each image using the title attribute

2 Answers2

title

alt