This question already has answers here:
Is it possible to format an HTML tooltip (title attribute)? [duplicate]
(9 answers)
Closed 7 years ago.
Is it possible to style the tooltip for the alt attribute?
I wish to style the background, font color etc for the html alt attribute.
Can anyone help me with this please?
You cannot design the default tooltip (i.e. styling the alt attribute) but you can use Javascript, CSS and a <div> or <span> tag to create something similar:
http://shurie.com/coder/code_details.asp?codeid=4
Or these CSS ONLY tooltips:
http://sixrevisions.com/css/css-only-tooltips/
Semantic Tooltips With Pure CSS3 and HTML5
This technique is so simple that I’m really surprised nobody has come up with it before, please shoot me link if they have but I couldn’t find anything after some extensive Google action.
Currently, most people use something like this to produce a pure CSS tooltip:
Title <span>Tooltip</span>
(Code from CSSGlobe)
But this is another extraneous element in our HTML and won’t really make much sense to screenreaders so let’s try to produce a more semantic solution.
See it in action
The solution lies in the title attribute and CSS’s content property. We can use the attribute to dynamically insert the text with CSS. The HTML is as basic as you like:
<p>I <span title="I mean really, really" class="tooltip">really</span> like pie.</p>
Using CSS’s content property, we then produce some content after the span like so:
.tooltip:hover:after { content: attr(title); }
HTML Dog has a list of what we can use with the content property.
Our tooltip will now show up when we hover over the span. We should probably make it a bit more visible.
.tooltip { border-bottom: 1px dotted #333; position: relative; cursor: pointer; }
.tooltip:hover:after { content: attr(title); position: absolute; white-space: nowrap; background: rgba(0, 0, 0, 0.85); padding: 3px 7px; color: #FFF; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-left: 7px; margin-top: -3px; }
Looking to the Future
With HTML5 finally allowing custom attributes, we can make this even more semantic.
<p>I <span data-tooltip="I mean really, really." class="tooltip">really</span> like pie.</p>
You can read more about HTML5 custom attributes at JavaScript Kit.
You will then need to change the CSS to:
.tooltip:hover:after { content: attr(data-tooltip); }
You can do this by using CSS and positioning and showing and hiding a div in javascript.
this shows you one way.
http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/
Related
What I am doing: I am trying to make a different style of style of <abbr> tag, and I found This code on Stack Overflow.
However, this code has a small problem that the default hint will still be shown when you move your mouse on the tag.
What I tried: I tried to hide the element and then using pseudo element to show the text instead, and I do not know how to get the content by only using CSS, so I posted a question last night. However, it seems that: it is impossible to get the content of the element, so I have to post this question for another solution. Also, my other idea is to make it lose focus, but after losing focus, the hover event cannot be triggered either.
Here is the code from that post(changed):
abbr[class*=bright]{
color: black;
background: yellow;
position:relative;
cursor:help;
}
abbr[class*=bright]:hover::after{
color: white;
background: red;
content:attr(title);
position:absolute;
bottom: 0; right: 0;
transform: translate(100%, 100%);
white-space: nowrap;
}
<abbr title="Here is the title, as you can see, the default one is still there" class="bright">test</abbr>
What I want: As what I said, it has a small problem, so I want to hide the default hint, to only show my hint.
Also, I want a CSS-only solution.
I am doing a project that has a input like this:
<div className="search__bar__description form__control">
<input
placeholder="Filter by title, companies, expertise..."
aria-label="Enter company, title, or expertise here"
onChange={e => setSearchInput(e.target.value)}
value={searchInput}
/>
</div>
When the site is in desktop I want to have that whole long placeholder but when in mobile I want the placeholder just to say Filter by title...
I am trying to figure out how to do this is CSS. Can I put a span inside of the placeholder & then just hide it? Would that be valid HTML? If it isn't W3C valid HTML can you please tell me how to do this?
Thanks in advance!
First, you don't need JavaScript to do this. Although you cannot put a span inside an input, you can perform some trickery using the :placeholder-shown pseudo-class to achieve what you're after. Browser support for this pseudo-class, at the time of this post, is really good.
From MDN:
The :placeholder-shown CSS pseudo-class represents any <input> or
<textarea> element that is currently displaying placeholder text.
This example makes the input placeholder color transparent on smaller-sized screens, visually hiding it. The span containing the short label is then shown at this break point. Notice it's styled and positioned so that it looks as close to the original placeholder text as possible. Finally, using the pseudo-class mentioned above, we hide the short label when the original placeholder is not shown (when input is not blank).
.form__control {
position: relative;
}
.short-label {
display: none;
pointer-events: none;
}
#media screen and (max-width: 700px) {
::placeholder {
color: transparent;
}
.short-label {
position: absolute;
left: 4px;
top: calc(50% + 1px);
transform: translateY(-50%);
font-size: 11px;
color: rgb(43%, 43%, 43%);
font-family: sans-serif;
letter-spacing: 0.4px;
display: block;
font-weight: lighter;
}
input:not(:placeholder-shown)+.short-label {
display: none;
}
}
<div class="search__bar__description form__control">
<input placeholder="Filter by title, companies, expertise..." aria-label="Enter company, title, or expertise here" />
<span class="short-label">Filter by title...</span>
</div>
jsFiddle
You can't put a span inside a placeholder.
The common solution to what you want to achieve is to have the placeholder text as a separate element, underlaid behind the text field. And then you can do whatever markup and styling you want to it. This, of course, is more effort, but such is the way of bespoke engineering.
You can see an advanced example here: https://css-tricks.com/float-labels-css/
If you ignore the animations, the take-away from his code example is that the <label> element is used instead of the placeholder attribute, and is underlaid behind the input field, so it looks the same, but then can be manipulated with all the same CSS (int his case, adding some fancy transitions) and sub-elements as any other standard element.
This question already has an answer here:
Hide title from tooltip
(1 answer)
Closed 8 years ago.
I use CSS to style the abbr tool tip:
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
width: 300px;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: #ffffe1;
content: attr(title);
}
<abbr title="As Soon As Possible">ASAP</abbr>
However, the original old-fashioned abbr tooltip is displayed too, in addition to the styled new one. How can I suppress it?
This cannot be simply solved with the answer to a similar question. The attribute name title must be kept and replaced at run-time with a javascript.
Since you can't prevent/hide the title attribute from showing on hover, just use a different attribute. A data-* attribute such as data-title would work. Just change the markup and the content value.
Example Here
<abbr data-title="As Soon As Possible">ASAP</abbr>
abbr:hover::after {
content: attr(data-title);
/* .. */
}
As for the rounded corners, just use the border-radius property.
How to add title='mandatory' from css to the following
<label class='mandatory'>Name</label>
.mandatory
{
background-image:url(/media/img/required.gif);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
font-weight:bold;
}
Well, although it's not actually possible to change the title attribute, it is possible to show a tooltip completely from CSS.
You can check a working version out at http://jsfiddle.net/HzH3Z/5/.
What you can do is style the label:after selector and give it display:none, and set its content from CSS. You can then change the display attribute to display:block on label:hover:after, and it will show.
Like this:
label::after {
content: "my tooltip";
padding: 2px;
display: none;
position: relative;
top: -20px;
right: -30px;
width: 150px;
text-align: center;
background-color: #fef4c5;
border: 1px solid #d4b943;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
}
label:hover::after {
display: block;
}
You can't. CSS is a presentation language. It isn't designed to add content (except for the very trivial with :before and :after).
Quentin is correct, it can't be done with CSS. If you want to add a title attribute, you can do it with JavaScript. Here's an example using jQuery:
$('label').attr('title','mandatory');
As Quentin and other suggested this cannot totally be done with css(partially done with content attribute of css). Instead you should use javascript/jQuery to achieve this,
JS:
document.getElementsByClassName("mandatory")[0].title = "mandatory";
or using jQuery:
$('.mandatory').attr('title','mandatory');
document.getElementsByClassName('mandatory')[0].setAttribute('title', 'mandatory');
$('.jmandatory').attr('title', 'jmandatory');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Place the Mouse Over the following elements to see the title,
<br/><br/>
<b><label class="mandatory">->Javascript Mandatory</label></b>
<br/><br/>
<b><label class="jmandatory">->jQuery Mandatory</label></b>
It is possible to imitate this with HTML & CSS
If you really really want dynamically applied tooltips to work, this (not so performance and architecture friendly) solution can allow you to use browser rendered tooltips without resorting to JS. I can imagine situations where this would be better than JS.
If you have a fixed subset of title attribute values, then you can generate additional elements server-side and let the browser read title from another element positioned above the original one using CSS.
Example:
div{
position: relative;
}
div > span{
display: none;
}
.pick-tooltip-1 > .tooltip-1, .pick-tooltip-2 > .tooltip-2{
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div class="pick-tooltip-1">
Hover to see first tooltip
<span class="tooltip-1" title="Tooltip 1"></span>
<span class="tooltip-2" title="Tooltip 2"></span>
</div>
<div class="pick-tooltip-2">
Hover to see second tooltip
<span class="tooltip-1" title="Tooltip 1"></span>
<span class="tooltip-2" title="Tooltip 2"></span>
</div>
Note: It's not recommended for large scale applications because of unnecessary HTML, possible content repetitions and the fact that your extra elements for tooltip would steal mouse events (text selection, etc)
Can do, with jQuery:
$(document).ready(function() {
$('.mandatory').each(function() {
$(this).attr('title', $(this).attr('class'));
});
});
While currently not possible with CSS, there is a proposal to enable this functionality called Cascading Attribute Sheets.
On the one hand, the title is helpful as a tooltip when moving the mouse over the element. This could be solved with CSS-> element::after.
But it is much more important as an aid for visually impaired people (topic handicap-free website). And for this it MUST be included as an attribute in the HTML element. Everything else is junk, botch, idiot stuff ...!
We have buttons of many sizes and colors that use background images. There is a label on the background image itself, but we need to keep the button's text in the HTML for usability/accessibility. How do I make the text disappear in all browsers?
Modern browsers are easy, I just used -
color: transparent;
It's Internet Explorer 7 that I can't get to comply. I've tried these CSS properties, and none of them can remove the text completely without destroying my site's layout in the process.
font-size: 0px;
line-height: 0;
text-indent: -1000em;
display: block;
padding-left: 1000px;
I would very much appreciate any help.
Personally, I go for the all CSS approach:
{ display: block;
text-indent: -9999em;
text-transform: uppercase; }
For whatever reason, text-transform: uppercase; does the trick for IE7. Of course, you'll probably have your own CSS along with that for additional styling (if needed).
Additional to your
color: transparent;
You can use something like
padding-left: 3000px;
overflow: hidden;
Regards
In some cases you can use the propery "content" to change what is contained in the element, personally though I would use javascript to do it.
Just write blank text into the element.
If the button is an input submit button, use the image
<input type="image" src="/images/some_image.png" />
You can style this with CSS
input[type="image"] {
border: 1px solid red;
width: 150px;
height: 35px;
}
If they are links, Dave provided the answer.
How do I make the text disappear in
all browsers?
I suppoose you want the altarnative text to disappear if the image is loaded.
For this puprpose you can use this:
<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />
You can apply additional styles if needed, but this minimum will do the job for you.
If I understand the question correctly, this might work (I don't have IE7 to test on at the moment, so not 100% sure)
For markup like this:
<a href="javascript:return false;" class="button" id="buttonOK"><span
class="icon">Ok</span></a>
Use this css:
span.icon {
/*visibility: hidden;*/
display:block;
margin-left:-1000;
width:100px;
}
or this might work depending on your requirements for usability/accessibility:
span.icon {
visibility: hidden;
}
I don't know what users / programs the labels need to be in the HTML for, but if it's for text browsers and such, maybe you could insert a JavaScript that removes the labels onLoad?
JQuery or Prototype would make that very easy.