I am using ActiveScaffold in a Ruby on Rails app, and to save space in the table I have replaced the default "actions" text in the table (ie. "edit", "delete", "show") with icons using CSS. I have also added a couple of custom actions with action_link.add ("move" and "copy").
For clarity, I would like to have a tooltip pop up with the related action (ie. "edit", "copy") when I hover the mouse over the icon.
I thought I could do this by adding a simple "alt" definition to the tag, but that doesn't appear to work.
Can somebody point me in the right direction?
The alt attribute is to be used as an alternative to the image, in the case of the image missing, or in a text only browser.
IE got it wrong, when they made alt appear as a tooltip. It was never meant to be that.
The correct attribute for this is title, which of course doesn't do a tooltip in IE.
So, to do have a tooltip show up in both IE, and FireFox/Safari/Chrome/Opera, use both an alt attribute and a title attribute.
Just a minor point to add to this thread... there is no alt tag or title tag. The alt attribute is for images, but all other elements on a page can have a title attribute, which is the best choice for cross browser compatibility.
<span title="Click here to edit the foo">
Edit
</span>
You want a "title" tag. I'm not sure if this is necessary anymore, but I usually add both alt and title tags to make sure all browsers display the tool tip the same.
The alt property of an img tag works in some browsers, but not all (such as some mozilla-based ones).
The "right way" to do this is to use the title property.
Tooltips in HTML are the contents of the alt text for image tags, but if you're setting this using CSS you probably have a background:url(...); style instead of an image.
Use alt on the images and title on the links.
As Prestaul pointed out, the alt tag should work for images and title for links. However, this is also browser dependent...most browsers should implement functionality that displays this metadata as tooltips but they aren't required to do so.
Realizing, as Joel Coehoom pointed out, that my icon was actually a background image, I created a transparent.gif image with title and alt attributes over top of the background, and voila - tooltips!
good tool here
http://www.guangmingsoft.net/htmlsnapshot/html2image.htm
you can just use the tag abbr and the tittle atribute with your test
eg <abbr tittle="some text"> </abbr>
as that answer https://stackoverflow.com/a/61601175/9442717
Related
I'm not good enough in JavaScript/jQuery to make my own gallery or modify an existing one. I'm using UniteGallery script which provide a nice looking tiles style gallery.
The problem is that I wanted a link to be displayed when the image is zoomed. And the only diplayed text when the image is clicked on, is the alt attribute.
So I'm wondering if I can put an <a> tag inside the alt attribute of the image. I know it's not what alt attribute should be for, but W3C validator doesn't seem to mind about that.
<img alt="Image 1 Title <a class='button' href='project1.html' target='_blank'>More</a>"
src="img/gallery/thumbs/image1.png" data-image="img/gallery/image1HD.png" data-description="Image 1 Description"/>
Do you think that's ok? (I don't even know what the data-description is used for in unitegallery.) If you got any other solution, I'll be glad to read it.
I have a title tag around an image which is only supposed to show on hover. It works in IE but in chrome the title tag text is actually shown on the image as well as on hover.
Here is my html snip for that section
<img id="projects" title="Some of My Projects." />
The image is in a table but I'm not sure if that is what would be affecting this. I do have a picture of what is happening but not enough reputation to post it in my question apparently.
Does anyone have any ideas?
Thanks!
I discovered that setting the background-image using CSS without setting a "src" attribute apparently makes Chrome treat the image as though it didn't load, so it will display the alt or title text on top of the background image. Setting a src attribute on the image instead of using the background-image in CSS made it stop showing the text.
I have found this as well, adding a title attribute on an img tag that lacks the src attribute, instead where one would use a sprite map via a background-image instead leads to the image showing as broken on Chrome (but works on IE).
My solution: wrap it in a span that applies the title:
<span title="Some of My Projects."><img id="projects" /></span>
Especially each image that contains the text and icon are displayed using background-image in CSS (using CSS Sprites), so there is no even alt or title if the image
had been shown using <img>. So, pure image in this case. How can actual text be added (or using some other mechanism) for search engines to better index these tabs?
You'd use an 'image replacement technique':
http://www.mezzoblue.com/tests/revised-image-replacement/
Just use actual relevant text in each element and use text-indent:-9999em; to shift it offscreen. This may involve extra styling such as display:block on the element if it's normally inline for text-indent to work but you'll end up with basic a CSS image replacement implementation.
You should absolutely be using text somewhere, at least an alt tag.
Try a something like <span>Text</span> with text-indent:-9999px;, or any of the other variations of css text hiding/masking.
There may be some merit to adding the title attribute to those tabs as well.
If you use a <span> and set its display to none via CSS, then you can put whatever text in there you like for SEO.
This is done on i.e. <h3> tags on the css Zen garden. A number of them use this construct:
<h3>
<span>The Road to Enlightenment</span>
</h3>
...where you then give the <h3> a CSS background-image and set the <span>'s display to none. You should be able to use the same type of idea for tabs that use images.
Are there any common problems why alt attributes on images wont work.
Tested for IE8 Standards mode.
Thanks in adv.
if you want to show text from alt attrib, use title='' attrib.
The difference:
alt shows up instead of img - when img cant load
title shows up when you mouseover the image
alt means just that, an alternative for when the image isn't displayed. If you want a tooltip, use title or longdesc. Historically alt has been abused to mean this, but IE8 has finally fixed this.
By "not work" I'm assuming you mean that the alt text doesn't appear when you hover over the image. You'll need to use the title attribute if you always want the text to appear in all browsers:
<img src="foo.png" alt="bar" title="bar" />
Yes, you should always specify the alt attribute for these reasons:
In case image is not found:
The text from alt will be shown instead
The alt tag is important in terms of Search Engine Optimization (SEO)
Accessibility reasons
To make my web site XHTML compliant, I have added a title attribute to all of my IMG tags.
However, when you mouseover an image, the text from my title attribute displays as a small popup. I don't want that text to be viewable.
Question: How do I prevent the browser from displaying the title attribute text as a popup while still keeping the title attribute present?
<img src="..." title="text that gets displayed as a popup but I don't want it to" />
You don't have to have a title to be compliant, you need an alt.
The behaviour you are seeing is the correct implementation by the UA of title so is hard/impossible to override.
This is browser specific. Some browsers choose to display the title attribute, some choose not to display anything, and some even choose to display the alt attribute instead. Though lately this has become more uniform across browsers, with most of them leaning to the title attribute..
Title is meant to be shown, if you want an image description that does not show except for screen readers, use the alt attribute which is only shown if the image cannot be displayed (=> Screen readers).
Use ALT and TITLE together. Put your nice, helpful text in the alt tag and then nothing in the title tag like so:
<img src="http://www.google.com/intl/en_ALL/images/logo.gif"o
alt="Goooooooogle!"
title="" />
If ALT is no longer "valid" (is it?!), I suggest that any solution around this slight validation annoyance will be far worse than ignoring it.
I don't think this is a great solution, living with the tooltip is better, but if you set an absolutely positioned div with a solid background set to very low opacity (1%) and a higher z-index then your image, you should not get a tooltip.
<img style="position:absolute;
top:0;left:0;width:200px;height:200px;"
src="yourImage.gif" alt="the text you don't want to show"
title="the text you don't want to show"/>
<div style="position:absolute;
top:0;left:0;height:200px;width:200px;
z-index:1000;filter:alpha(opacity=01);
-moz-opacity:0.01;background-color:gray;">
</div>
Again, I don't suggest this, but this is just to show that there is a way...
It has been a while since this post, but I figure for all those who wander here from Google, here's my 2 cents:
The alt tag is fully valid--required even. The last solution works in nearly every browser, and where it doesn't work, a tiny rectangular tooltip will be shown with no text. The title tag overrides the alt tag and forces a specific tooltip to be shown. I don't know why people voted this down, considering it's the best solution here.
For those of you who see this as a bad markup: for a general website, yes, this isn't good practice. This is a modern age of the web, however, and you have to also consider web applications and very obscure one-off situations where this might be the best possible solution given the markup options we have to work with. We all know web 2.0 is only MOSTLY there. ;)
PROPOSED ALTERNATIVE:
Personally, I would suggest creating a div the size of the image and setting its background-image to the src that you want to use. There is DEFINITELY no tooltip this way, regardless of browser, and it's 100% compliant with everything. This will not work if it's an inline image, but it's pretty rare to use an image inline with text and not want a tooltip (an icon beside links, for instance, a great tooltip might be "External Link", or for a mailto:, "Send an email to:", etc.)