If you have a tag with the attribute title like this:
<span title="this is mouseover text">some text</span>
and you hover over it with your mouse, you will see "this is mouseover text".
My question is, can you change the font-family of "this is mouseover text"? Is that font-family that shows up the font-family of your browser? I tried even putting in escaped html code with tags to try and change that font-family but it didn't work.
Is this even possible?
EDIT: Is this possible maybe in asp.net??? Using code behind?
As far as I know, there is no way to customize the basic title element. You can try using different tooltip libraies. Seriously, there are dozens. Most of these use JavaScript, but there are ways to do it with pure CSS, too.
These libraries/methods usually create a new, hidden by default element which will become visible when you hover over their anchor. They are easy to use, too, and offer great customization options.
Related
Is there a way to use something similar to pointer-events: none to disable only the hyperlink and not the mouseover text?
For example, suppose I have:
link text
Then the link is disabled, but the mouseover text is also disabled. I want to know how to just disable the link, while keeping the mouseover text active.
You can replicate this using Javascript, just simply take out the style and add onclick.
link text
EXAMPLE
I would not suggest doing this, instead, I would suggest styling a <span> to look like a link, with a title to get the tooltip effect you are after.
Here is an example of this
Like this. Javascript will stop the link working when you click it. However the title is still shown when hovering over it
link text
This is not really very good coding though. If you don't want a link, then don't have one. If you want he effect of basically a tooltip then create a tooltip instead.
I am creating a set of divs which the user can navigate through with tab, and I wanted to add the standard orange focus outline to the elements.
Does anyone know what I need to do to add it in? I know that it works off the outline property, but I'm not sure what color to set it as, or whether I'd be better off using a box shadow with a bit of blur to get the same effect.
Also, in case it's relevant, I'm using dojo and avoiding jquery - but hopefully this is a pure css solution :)
I would suggest this working jsFiddle, note that in order to accomplish this you will have to use <div tabindex="0"></div>.
Every browser renders the focus differently. In order to unify the entire experience on your website, I would suggest removing the browser outline with CSS and adding your own style.
As far as I know, only Chrome renders the orange outline, I've tried to match the color as best as I could, but you can always experiment on your own.
You can use the css :focus Pseudo selector
:focus {
declaration block
}
Although the div attribute does not accept input, so it cannot have :focus normally. So you would have to set the div's to have a tabindex attribute
when we hover on any html tag like anchor tag,img tag etc if we have set the title attribute then it will display its value when we hour the mouse on that tag , my question is that how can i change the styling of that tag like changing its back ground color font color. by default light cream color back gorung and black font display i want to change this
please tell me how can i do this ?i have no idea about this?
Unfortunately, CSS doesn't offer a way to style the title text (that I know of), but you could use a JavaScript based tooltip instead. There are many to choose from and most will be fully customizable to your needs.
If you absolutely have to style your html buttons, what is the correct way to emphasize some of them? e.g. "Add to cart" is usually emphasized visually to make it stand out.
Option 1 - wrap submit in em or strong + css
Option 2 - class + css
Option 3 - ?
CSS is the way to go. For example, on the Facebook "Notes" application, the "Publish" button is in strong blue, and the others are in grey. That's all done with CSS classes and IDs.
Ultimately, you should just look for a site you trust, if you want a second opinion on CSS. Tools like Firebug make it easy to see exactly how they do their styling.
A class would probably be you're most flexible solution. If you want to do anything more than just bold or italic then you are going have to use some sort of class/id anyway.
If you have this item in a container however, then you could just use that container to select your button.
html
<div class="foo">
<input type="submit" />
</div>
css
.foo input
{
...some styles
}
Putting the class on the input is perfectly acceptable though. The previous method is only if you already have the button in a container and you don't want to add any extra markup.
Well, if you're looking to emphasize a button, I'd say the most semantic representation is to wrap your <button> tag (or <input type="submit"> or whatever you're using) in <em> tags and style it in CSS, e.g.:
em button {
color: blue;
font-style: normal;
font-weight: bold;
}
(Remember that, while italics and bold may be the default visual styles for <em> and <strong> in most browsers, that's just convention. If you aren't "strongly" emphasizing something, just use <em> even if you want it displayed bold.)
The correct and semantic way would be
<button><em>label</em></button>
but since IE does not support multiple elements you have to use <input type="button"> -- and wrapping that in an em or something is bad.
I'd strongly prefer
<input type="button" class="emphasized"/>
or something..
With CSS2+ you could use option 3: Only CSS
input[type="submit"] {
border: 3px solid blue;
}
More info: http://www.w3.org/TR/CSS2/selector.html
I would use an Image Button... no emphasis can match the beauty of a well designed icon...
"A picture is worth a thousand words!"
Ask an open question, get a bunch of correct-but-different answers...
Most people just go for an image as the button as that bypasses a lot of browser issues. You know it will look the same on every browser.
You can use CSS to style the element you use to submit. Going that route, you can use the <input type="submit"> and style appropriately, or you can use <button type="submit">[lable goes here]</button>. I prefer the latter as its easier to style, but that's largely a personal preference.
Best advice is to look around and when you see something like what you want, look at how they did it.
A good way to think about these kinds of issues is to consider what you'd want from an aural browser. In this case, if your page is being read out, would you also want the button to emphasized by a different tone or volume of voice from the other buttons. If so, you should use semantic markup to indicate that this is emphasis and not just presentation.
<em> should really be used to emphasize individual words to indicate the where the stress should be placed in a sentence, so unless your button appears in the middle of sentence, I would prefer wrapping the input element in <strong> rather than <em>.
In addition, you can add CSS to get the visual effect you want.
A lot of sites use images. One problem with that can be inconsistency - you have to make all of your buttons images, or none of them or some will look out of place.
I generally go for:
larger font size (font-size: 120%)
bold text (font-weight: bold)
padding (more horizontal than vertical, e.g. padding: 4px 8px)
I don't change colours, because of the massive platform variations. Grey text might look fine for most people, but if the user is using a darker theme then the button background colour could make the text unreadable.
If you start changing any colours you'll need to set at least a color, background-color and border.
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