I'm looking to customise the CSS of a site I regularly use.
My question relates to a title tag of an element (below).
<span title="42%" class="progress"><span style="width: 42%;" class="indicator">
</span></span>
I'd like to take this title tag (42% in this case, but changing dynamically) and display it as text using CSS.
The tricky part obviously comes from the fact that this unit changes dynamically.
Is there a way to say 'display the unit inside the title " " as text' using CSS.
Thanks in advance, all help appreciated.
Tom Perkins
If you mean displaying the title attribute along with your existing text/elements instead of as a custom-designed tooltip, some browsers support the CSS attr() function:
.progress:after {
content: attr(title);
}
See this jsFiddle example.
As said here:
http://groups.google.com/group/css-design/browse_thread/thread/3c3194dd0a3c7898
"The presentation of the title as a tooltip is a function of the
browser and is not controlled by HTML or CCS. "
You can follow the links there to see some fixes for that
Related
In my web app, I want to highlight a piece of text so that it looks like somebody has painted it with a certain color. The Medium app uses this effect, too.
(I would like to show an image of this effect here, but stackoverflow does not allow me to post it because I do not have enough reputation points, yet.)
What kind of CSS and/or HTML markup do I need to achieve this?
As a side note: My app is written with React.
You need to use the semantic <mark> tag for this:
<p>This is some <mark>marked text</mark>.</p>
You can then style it any way you want using CSS:
mark {
background-color: HotPink;
}
<p>This is additional <mark>marked text</mark>.</p>
There are many ways to do it:
Highlight using the HTML <mark> tag
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Highlight text with only HTML code
<span style="background-color: #FFFF00">Yellow text.</span>
Highlight text with CSS & HTML
body { background-color:green; }
.highlight { background-color:#FFFF00; }
p { background-color:#FFFFFF;
<span class="highlight">Highlighted Text</span>
it doesn't matter if the application is written in React on any other framework. You can always define a CSS for basic html tag, such as as #Salaman suggested.
You can use the example that #Salman provided, but I would suggest a small modification.
mark.hotPink {
background-color: HotPink;
}
<p>Do not forget to check out our <mark class="hotPink">hot new offer</mark> today.</p>
<p>Also, you can check out our <mark>standard offers as well</mark>.</p>
You can write a CSS for tag but you probably don't want to do it for every mark tag (because you don't know if some other part of the system might be affected by this. The best (and the safest) way to do this is to create a custom class (i.e. class="hotPink" and assign it to your mark.
Hope this helps, all best! :)
I've made a small image gallery with 'Image Thumbnail Viewer 2' Link here
script allows title attribute below image that is expanded. Everything works fine but I cannot find a way to style the text in the title attribute.
All i want to do is change some basic features i.e. font-family, font-size, margin etc. nothing fancy.
<tr>
<td>
<a href="img/test%20images/IMG305eng.jpg"
rel="enlargeimage"
rev="targetdiv:main,trigger:click,preload:yes,fx:fade"
title="<em>Hello World</em> - 2014 - 20x30x5cm">
<img src="img/test%20images/IMG305eng.jpg">
</a>
</td>
</tr>
above is an example of one image thumbnail
Each image will will need a different caption underneath it. not sure if its worth using the title attribute or just doing it another way entirely.
Thanks - second post on stack-overflow so let me know if i'm doing anything wrong.
You need to target the markup (HTML) that the plugin generates as #Aziz has pointed out.
Your text (when hovering an image) is contained in an element with the ID of #loadedarea.
#loadedarea {
font-weight: bold;
color: red;
}
you may need to modify the js script to insert a specific tag :
example: instead <br/> i added a <p> https://jsfiddle.net/x7w12etr/2/ (fixed and updated fiddle)
modified: (notice that you can add a class or id to this extra tag holding the alt attribute value of image)
if (setting.link)
imghtml=''+imghtml+''
imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<p>'+$anchor.attr('title') : '')+'</p></div>'
return $(imghtml)
}
From here you can target that p with css .
original:
if (setting.link)
imghtml=''+imghtml+''
imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
return $(imghtml)
},
I would like to remove the automatic text that appears when the cursor hovers over the jumplink. The text is usually the name of the post title that its directing to. However I would like to remove it. I've tried removing certain parts of the following code for the jumplink but to no avail. The coding is as follows:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Any help will be appreciated. The URL to the blog is as follows: http://www.blankesque.com
The browser will show what is inside your title attribute automatically.
There is a good reason for that.
Sometimes you have an image on you web site and for any reason will not display or your site is loading to slowly.
In place of your image you than can see the value of the title attribute (or the alt attribute in very old browsers), so the user will not see a complete empty space
So if you can miss the title attribute just deleted or set his value to ="".
There are also other solutions for this, but seen you don't know much about attributes, seems to me not appropriate.
Remove the expr:title='data:post.title' part from the <a> tag in the code.
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
I know you haven't got javascript tagged but I tried css and couldn't get a solution and the only way I found was JS, I'll keep trying though
var links=document.getElementsByTagName('a');
for(i=0;i<links.length;i++){links[i].title="";}
this won't show the title<br><br>
This won't show the title
Is there a way to increase the duration of a tool tip displayed using the title attribute of an html tag?
Currently in IE it appears to only have about a 5 second duration and then disappears.
I think this is operating system dependent and you should not try to override that.
The best way will be to create a custom tooltip.
Here are some good ones
jQuery Tooltip Plugin Demo
How to increase default hover duration of title attribute (tooltip)
Dont use IE, no time limit in Firefox browser. Or use the code I done.
I made some code in html/css only in one file, could not make it easier.
<!DOCTYPE html><html><body><style>
.m span{display: none;list-style: none} .m {z-index:24;position:relative;display:inline-block}
.m:hover span{z-index:999;display:block;position:absolute;top:19px;left:1em;border:1px solid #000;background-color:#eee;color:#000;min-width:300px}
</style>
<div class="m"> News <span> Links inside span works good <a target="_blank" href="http://cnn.com">Cnn.com</a></span></div>
<div class="m"> Hover over here and Information comes up <span> To make complex things easy is not so easy to do. </span></div>
<br> Just som text here to give you the 3D effect <br>
</body></html>
To elaborate further on phoenix' answer. Custom tooltips will allow you great flexibility in their appearance and layout. You need to get a JavaScript library (for example, jquery, or mootools) and get a plugin to show them. Then you will link the JQuery .js file, the plugin's one, and the css, finally you will add some markup to make it work.
For example, this one: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ or this one: http://craigsworks.com/projects/simpletip/
They are usually quite simple to install, the only requirement is that your site supports javascript.
Try WZ tooltip (may no longer be maintained): Click here
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I use a carriage return in a HTML tooltip?
I'd like to know if it's possible to force a newline to show in the tooltip when using title property of a TD.
something like
<td title="lineone \n linetwo \n etc...">
Can this be done?
This should now work with Internet Explorer, Firefox v12+ and Chrome 28+
<img src="'../images/foo.gif'"
alt="line 1
line 2" title="line 1
line 2">
Try a JavaScript tooltip library for a better result, something like OverLib.
One way to achieve similar effect would be through CSS:
<td>Cell content.
<div class="popup">
This is the popup.
<br>
Another line of popup.
</div>
</td>
And then use the following in CSS:
td div.popup { display: none; }
td:hover div.popup { display: block; position: absolute; }
You will want to add some borders and background to make the popup look decent, but this should sketch the idea. It has some drawbacks though, for example the popup is not positioned relative to mouse but relative to the containing cell.
The Extensible Markup Language (XML) 1.1 W3C Recommendation say
« All line breaks MUST have been normalized on input to #xA as described in 2.11 End-of-Line Handling, so the rest of this algorithm operates on text normalized in this way. »
The link is http://www.w3.org/TR/2006/REC-xml11-20060816/#AVNormalize
Then you can write :
<td title="lineone
linetwo
etc...">
Using
Works in Chrome to create separate lines in a tooltip.
This should be OK, but is Internet Explorer specific:
<td title="lineone
linetwo
etc...">
As others have mentioned, the only other way is to use an HTML + JavaScript based tooltip if you're only interested in the tooltip. If this is for accessibility then you will probably need to stick to just single lines for consistency.
Using
didn't work in my fb app.
However this did, beautifully (in Chrome FF and IE):
<img src="'../images/foo.gif'" title="line 1<br>line 2">
I use the jQuery clueTip plugin for this.
If you're looking to put line breaks into the tooltip that appears on mouseover, there's no reliable crossbrowser way to do that. You'd have to fall back to one of the many Javascript tooltip code samples
The jquery colortip plugin also supports <br>
tags in the title attribute, you might want to look into that one.