I have question to know the truth. can some one tell me is HTML title attribute a tool tip.
Someone told me it is not a tooltip.
Can anybody describe what is a tool tip?
and HTML title is it or not?
I need the truth pleas.
It is "Advisory information for the element" according to the specification.
Some browsers render it as a tooltip when you hover the element.
Obviously a screen reader would not, it reads it out.
A touch screen browser would not, it doesn't support a hover state.
Html title attribute is not a tool tip. But browsers can display it as a tooltip.
The problem with this is that you no longer control what your website shows. You will depend on whether the browser wants to show it or not.
A tooltip is programmed so you can control the operation, and you can change it, add events, etc ...
https://www.w3schools.com/tags/att_title.asp
"The title attribute is part of the Global Attributes, and can be used on any HTML element."
It is simply an attribute, and the value of this attribute is being shown by most browsers when hovering over the element looking like a tool tip.
In my opinion, it actually is a tooltip, since the value of the attribute is shown when the user hovers his mouse over the element. But the styling and even if the value is being shown is up to the browser, and you have no control over it.
It just depends on what is a tooltip for you personally :)
Usually, "web people" refer to tooltips as popup content when hovering over an element. Usually, these tooltips are being shown using JavaScript or vanilly CSS.
https://www.w3schools.com/howto/howto_css_tooltip.asp
My 2 cents - but I think it's really up to one personally whether you think of it as a tooltip.
Html title attribute is not tool-tip but on hover of the element we can see the title the element
For Eg:
ABCD INFO
so we will get output as
enter image description here
Related
I understand that for a website to be "accessible", images should in general have the alt tag. The alt tag should provide alternate text for the image, in particular when the image contains content that is relevant for the user.
When one uses the alt tag like :<img alt= "alttext" ...> the alttext does not display when the mouse hovers over the image. If one adds the title tag, then one can have the alttext displayed.
My question is: Is the use of the title tag appropriate for this?
I have found a bit of conflicting information on this:
This site seems to discourage the use.
This site seems to say that the use is fine.
alt attribute is displayed when the image cannot be loaded, and used for accesibility when that feature is set in the browser. It also helps for Search Engine Positioning (SEO) (thanks #Chris for noting this)
alt HTML reference
title is just Advisory information and it's disadvantaged for accesibility purposes. Source: W3.org
title HTML reference
For example, this is an extension for chrome (offered by google) that show alt text, not title..
If your aim is to have some text appear when you hover over an image, then yes, the title attribute is appropriate. Ensure that any key information in the title text is duplicated elsewhere on the page.
If your aim is to provide additional information about the image to all your readers, then you will need to consider an alternative way for keyboard and touch based users to read that content. It may be simpler just to display the content next to the image for all users.
Unless your image is focusable, relying on a tooltip is not a solution.
Having to use the mouse to discover the subject of an image is not accessible to keyboard only users.
What you need to do is :
providing an alt text for screenreader users (people who can't see it)
provide contextual description next to the image if you need to give all of your visitors more elements (like copyright owner, artwork title, ...).
Note that you have to set an alt text, it still can be empty if the alternative is not relevant (decorative images, or redundant information).
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is putting a div inside an anchor ever correct?
I want to have a link on a complex element (containig images, paragraphs and other stuff).
I know it works, but is it ok to have a <div> element inside an <a> element ?
Yes … and no.
No complete HTML or XHTML recommendation allows it.
The HTML 5 draft does permit it, but you may have to do things such as explicitly setting display: block on the anchor to get it to work in some browsers. You may find that others simply don't support it (I'd like to be able to link to a reference that shows browser support for this, but don't know of one, please comment if you do.)
That said, while have nice big click targets can be useful, it isn't an approach that is friendly to the "skim through links mode" that some browsers (especially screen readers) have. You might be better off using a regular link in the content, and applying some JavaScript to react to a click on the whole element.
In XHTML1.0 and HTML4.01: no. a is an inline element that can only contain other inline elements (but not another a).
In HTML5: yes, you are allowed to do that. BUT consider why you would've hundreds of characters in a link.
It's bad for SEO (dilution I believe) and bad for many disabled users ("Hey screen reader, tell me what does this link do?" - "Let me read to you aloud this link for half a minute") and perhaps bad for usability.
Another solution would be to put a link on say your heading in your div or some meaningful text. Then in JS make your div behave like what you wanted to do initially. Then it'll work for users using an assitive technology (screen readers and alike), for keyboard users (they can tab through the link) AND for sighted mouse users with JS.
No, unless you don't care about IE7 and down. The link will not function properly in IE7, even if set to display:block.
What is the "correct" way to deactivate tooltips on a given page so that the title attribute of a tag does not get shown?
There is no specific "correct" way.
If you don't want a title on an element, don't put one there.
If they must exist, you can use JavaScript to remove the title from any element you need to.
The issue here is that how the attribute is displayed is browser dependent - the spec says so:
Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object).
The fact that they display as a tooltip in most visual browsers does not mean they have to be. And there is no specific standard mechanism to "disable" this behavior.
I want the font color to change in a textarea as I type in specific keywords, like in Visual Studio.
I have not seen this anywhere, so I don't know if this is possible with HTML and JavaScript.
Has anyone seen anything like this? Or know how to write it?
Textarea is a standard HTML element and so was invented just after the dawn of time. Unfortunately this means it is limited in it's appearance and functionality.
Changing the colours of specific words is not possible as far as I know. However a way to get around this would be to have an iFrame embedded in the page. That way, you can treat the iFrame content as another web page and style it using CSS.
The Yahoo RTE, the FCKEditor and the Lightweight RTE works in this way.
Another option, which does not use an iFrame is the editor used here on Stack Overflow, known as the WMD. The files are here.
It's not possible.
Way to go is to make textarea's font, but not cursor, transparent using color:#000;-webkit-text-fill-color:transparent, then create underlying, 100% overlapping div to which content of textarea will be copied + formatted on textarea's oninput event.
You'll need to adress (or avoid) some issues coming out of syncing these two elements, like scrolling for example, but it can be done. I made my own HTML editor this way.
AFAIK, css property -webkit-text-fil-color is supported in Opera, Chrome and should be in soon-to-be-released Firefox v.48.
You would probably have to run javascript on the client to detect when the text changes, then replace the text to be highlighted with some child html elements with the proper style.
For example
Original text:
This is what the user typed.
Highlighted text
This is what the <a class="className">user</a> typed.
I have a website in which I provide tool-tips for certain things using a hidden <span> tag and JavaScript to track various mouse events. It works excellently. This site somewhat caters towards people with vision issues, so I try to make things degrade as well as possible if there is no JavaScript or CSS and generally I would say that it is successful in this regard.
So my question is, is it possible for these <span> to only exist if CSS is being used? I have thought about writing out the tool-tips in JavaScript on document load. But I was wondering if there is a better solution.
Perhaps you need to re-think the way you are providing tooltips. Could the content be contained in the title attribute of a semantically appropriate element?
EDIT: If you provide more info, someone might be able to suggest more of a solution. What sorts of elements are the tooltips popping up on? Images? Would the abbreviation tags be appropriate?
Quick Solution I just came up with: <span> has access to the core attributes, which include title, so you could include the tooltip text in the title, and use a javascript library like jQuery to display tooltips for all spans with a title.
A quick hack would be to color the text the same as the background (say, white on white) in html, and then use CSS to change the color back to something visible (black on white). Of course, this is only relevant for people able to see the text. Screen readers and such wouldn't see the text as hidden.
CSS is also used by screenreaders to help define which page elements are read or not.
Screen readers will almost always ignore elements with display:none applied to them, so not using CSS is not a valid indicator of a screenreader's presence.
I would go with Chris' idea of using javascript to generate the tooltips based on a title (or alt) attribute.
You could use JS to ensure that tooltips are only displayed when valid styles are set, so if JS is enabled and CSS disabled you can treat the extra information differently (eg footnotes).
http://juicystudio.com/article/screen-readers-display-none.php
http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/