I am trying to build an email template in which i have to show some images to different mail client (eg.. outlook, thunderbird...). Now problem is when these clients does not allow to show image at that time broken image box is displaying which i don't want to display.
I had also refer
Refered link 1: How to remove borders around broken images in webkit?
Refered link [2]: input type="image" shows unwanted border in Chrome and broken link in IE7
Refered link [3]: How to stop broken images showing
but not able to find any proper output.
Note : I can not use div tag. I must have to use table tags.
CODE What I am using :
<table style="background:#fff; width:600px; margin:auto auto;">
<tr>
<td>
<a href="http://www.sampleurl.com">
<img src="http://sampleimageurl.com/sampleimage.png" height="55" width="198" />
</a>
</td>
<td style="text-align:right;"><a href="http://www.sampleurl.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px;">www.sampleurl.com</span>
</td>
</tr>
<!--<tr>
<td colspan="2" style="height:1px; background: #0d5497;"></td>
</tr>-->
OUTPUT what i get.
use alt here for fallback
demo
html
<img src="abc" alt="image" />
css
img {
width:200px;
height:200px;
}
Alternatively, if you dont want to show any alt text, just give a blank space.
demo here
HTML
<img src="abc" alt=" " />
I know I'm late to the party but I didn't see a simple solution that used native javascript. Here is the solution I came up with
<img src="https://test.com/broken-image.gif" onerror="arguments[0].currentTarget.style.display='none'">
onerror calls a function, passing an error event as an argument. Because the argument is not actually defined as 'error' we need to get it from the arguments array that all functions have. Once we have the error we can get the currentTarget, our img tag, and sent the display to none.
I think you can use on error event on img.
here is a simple solution
Please pay attention that this script uses onDomReady event. In this case you should write:
<script type="text/javascript">//<![CDATA[
$(function(){
$('img').on('error', function () {
$(this).remove();
})
});//]]>
</script>
UPDATE
Why do you load images ? You can attach this image to email and show it via CID
You could any other element instead of and IMG and set the background-image using CSS. If that image is not found, you will not get the strange looking box.
<span style="background-image:url('http://sampleimageurl.com/sampleimage.png'); display:inline-block; width:198px; height:55px">
element with background
</span>
Sounds like a tough call not being allowed to use ALT text
If whoever is making this decision is convinced by a bit of styling you can do that e.g.
<img src="logo.jpg" width="400" height=”149″ alt="Company Name" style="font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px; background:#ccffcc">
see http://jsbin.com/IcIVubU/1/
use this code block in your mail content to keep unrendered image as hidden.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<img id="imgctrl" src="imgs/sandeep11.png" onerror="$('#' + this.id).hide();" alt="Alternate Text" />
concept is.. use any CDN jquery reference then only jquery code will work. and I guess your src image path also should be some live url. if not then, it should be in attachment.
Please Click on "Show Remote content" to get remote urls into
thunderbird. this is security constraint of thunderbird. that's why
your images are not being loaded.
I know it is an old question but I found I had this problem too today (08 January 2020) and found a way to get around it.
I tested with the latest versions of Firefox and Chrome, I still could not find a solution for Safari.
Firefox:
For firefox you must add alt=" " note the space
Chrome:
For Chrome it must be alt="" note the empty space
The problem is that when I add the space the icon shows up on Chrome and disappears on Firefox, and vice versa when I remove it.
I added just a space because I did not want any text showing up on the image.
I did not have to add any of the following lines for it to work (I saw many solutions proposing some or all of them), but I left them in just in case
border: none;
outline: none;
border-image: none;
From there I guess it would be detecting a the browser in JavaScript and changing the alt attribut to " " or "".
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror =function(){this.parentNode.removeChild(this);
})});
DEMO
you can remove img by javascript:
arr = document.getElementsByTagName("img");
for(i=0; i<arr.length; i++){
if(arr[i].src=="")
arr[i].parentElement.removeChild(arr[i]);
}
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
I'm trying to get everything in the anchor tag to be a clickable link. Unfortunately, in IE6 (which is the only browser I'm concerned with currently), the only thing that isn't a clickable link are the inline images. I know that it's not valid html to put a div inside of an anchor but it's not my markup and I've been asked to avoid changing it. Any suggestions to altering the CSS to enable the images as clickable links? If changing the markup is the only solution... any suggestions there? My initial thought was to set the image as a background of it's parent (.ph-item-featured-img), although I'm unclear if that will solve the problem.
Thanks!
<div class="tab-panel-init clear ui-tabs-panel ui-widget-content ui-corner-bottom" id="ph-flashlights">
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
</div>
The problem is that it isn't valid html. Explain that you have to change the markup to make it work as desired. Changing the div to a span and setting the class .ph-item-featured-img to display: block should produce the same look-and-feel and be correct html.
Edit: Another, not as clean solution, is to add a click-listener with JavaScript and invoke the link upon a click on the image.
If you can't change the mark up (which you admit isn't valid), I don't think there is anything you can do here.
You should reconsider changing the markup. This example is bad in so many ways it could serve as a textbook example of what not to do.
Alternate strategies:
Remove everything but the image and
give it an onclick handler that does
the link mechanics.
Remove the DIV and just have the IMG
inside the anchor tag.
etc.
Well i looks like youre already using jQueryUI so why not just through a click even on the containing DIV. Also you should definitely change the markup. If its not valid, its not valid. That can lead to all kinds of problems other than the one youre currently facing. If there is a good reason for change this is it.
This is what the w3c validator returns when I pass in the snippet you posted:
Line 15, Column 46: document type does not allow element "DIV" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag
<div class="ph-item-featured-img">
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
If I remember correctly, IE6 requires that every element inside of the <a> tag to be an element with CSS display: inline set on it (or inline-by-default elements like <span>, <b>, <strong>, etc.), or else it doesn't get linked, or links act weird.
Perhaps it is even IE6's HTML parser that is to blame. Maybe it sees the <img src="#"> and thinks, "that's not a valid URL to an image! :ignore:". IE6 is strange that way, often acting in a way that is a diametric opposite to how standards-compliant browsers act.
Truth is, this I have no way of checking all this; thankfully, every Windows computer I have access to has IE7+ on it. Perhaps you should take Google's route and just explicitly say that you're not going to support IE6, redirecting all IE6 browsers to a place where they can upgrade.
I believe you can do this with conditional comments like so:
<html>
<head>
<!--[if lte IE 6]>
<meta http-equiv="refresh"
content="2;url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<![endif]-->
...
</head>
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
I'm currently adding verbose tooltips to our site, and I'd like (without having to resort to a whizz-bang jQuery plugin, I know there are many!) to use carriage returns to format the tooltip.
To add the tip I'm using the title attribute. I've looked around the usual sites and using the basic template of:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
I've tried replacing the ? with:
<br />
&013; /
\r\n
Environment.NewLine (I'm using C#)
None of the above works. Is it possible?
The latest specification allows line feed characters, so a simple line break inside the attribute or entity
(note that characters # and ; are required) are OK.
It’s simple: just press Enter!
<a href="#" title='Tool
Tip
On
New
Line'>link with tip</a>
Try character 10. Until January 2015 it wouldn't work in Firefox.
The text is displayed (if at all) in a
browser dependent manner. Small
tooltips work on most browsers. Long
tooltips and line breaking work in IE
and Safari (use
or
for a
new newline). Firefox and Opera do not
support newlines. Firefox does not
support long tooltips.
http://modp.com/wiki/htmltitletooltips
Firefox now supports using
to insert a line break in an HTML title attribute. See the snippet example below.
Hover for multi-line title
Tested this in IE, Chrome, Safari, Firefox (latest versions 2012-11-27):
Works in all of them...
Also worth mentioning, if you are setting the title attribute with JavaScript like this:
divElement.setAttribute("title", "Line one
Line two");
It won't work. You have to replace that ASCII decimal 10 with a ASCII hexadecimal A in the way it's escaped with JavaScript. Like this:
divElement.setAttribute("title", "Line one\x0ALine two");
As of Firefox 12 they now support line breaks using the line feed HTML entity:
<span title="First line
Second line">Test</span>
This works in IE and is the correct according to the HTML5 spec for the title attribute.
As a contribution to the
solution, we can also use 	 for tabs if you ever need to do something like this.
<button title="My to-do list:
-Item 2
-Item 3
-Item 4
-Subitem 1">TEST</button>
Demo
On Chrome 79,
does not work anymore.
I was successful with:
This works in all major browsers.
If you are using jQuery:
$(td).attr("title", "One \n Two \n Three");
will work.
It was tested in Internet Explorer 9: working.
will work on all majors browsers (IE included)
Here's a demo: http://jsfiddle.net/rzea/vsp6840b/3/
HTML used:
Multiline Tooltip
<br>
<br>
<a href="#" title="List:
• List item here
• Another list item here
• Aaaand another list item, lol">Unordered list tooltip</a>
<----- This is the text needed to insert a carriage return.
We had a requirement where we needed to test all of these, and here is what I wish to share:
document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")
<p title='Tool
Tip
On
New
Line'>Tooltip with <pre>
new
line</pre> Works in all browsers</p>
<hr/>
<p title="Tool
Tip
On
New
Line">Tooltip with <code> </code> Not works Firefox browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code> </code> Works in some browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>
</code> May work in some browsers</p>
<hr/>
<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>
<hr/>
<p title="List:
• List item here
• Another list item here
• Aaaand another list item, lol">Tooltip with <code>• </code>Unordered list tooltip</p>
<hr/>
<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>
<hr/>
<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>
</code> Works in most browsers</p>
<hr/>
Fiddle
This
should work if you just use a simple title attribute.
On Bootstrap popovers, just use data-html="true" and use HTML in the data-content attribute.
<div title="Hello
World">hover here</div>
I don't believe it is. Firefox 2 trims long link titles anyway and they should really only be used to convey a small amount of help text. If you need more explanation text I would suggest that it belongs in a paragraph associated with the link. You could then add the tooltip JavaScript code to hide those paragraphs and show them as tooltips on hover. That's your best bet for getting it to work cross-browser IMO.
On Chrome 16, and possibly earlier versions, you can use "\n". As a side note, "\t" also works.
As for whom
didn't work for, you have to style the element on which lines are visible in as: white-space: pre-line;
It is referenced from GuitarWorker's answer to Add line break within tooltips.
Just use this:
<a title='Tool
Tip
On
New
Line'>link with tip</a>
You can add new line on title by using this 
.
Just use JavaScript. Then it is compatible with most and older browsers.
Use the escape sequence \n for newline.
document.getElementById("ElementID").title = 'First Line text \n Second line text'
According to this article on the W3C website:
CDATA is a sequence of characters from the document character set and
may include character entities. User agents should interpret attribute
values as follows:
Replace character entities with characters,
Ignore line feeds,
Replace each carriage return or tab with a single space.
This means that (at least) CR and LF won't work inside the title attribute. I suggest that you use a tooltip plugin. Most of these plugins allow arbitrary HTML to be displayed as an element's tooltip.
Much nicer looking tooltips can be created manually and can include HTML formatting.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more
and then some">over</a> the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>
<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>
</body>
</html>
This is taken from the W3Schools post on this. Experiment with the above code here.
Razor syntax
In the case of ASP.NET MVC, you can just store the title as a variable, as \r\n, and it'll work.
#{
var logTooltip = "Sunday\r\nMonday\r\netc.";
}
<h3 title="#logTooltip">Logs</h3>
I was directed to this page while searching for a solution to display breakline in Bootstrap tooltips. Bootstrap tooltips are displayed when data-toggle="tooltip" is added to a HTML tag.
Finally, I found out that a data-html="true" should be added to the tag, and doing so the HTML inside your title will be rendered. Then use <br> to breakline. Checkout the samples below:
Before (not showing any breakline):
<i class="bi bi-x-circle" data-toggle="tooltip" data-placement="top" title="test1 <br> test2"></i>
After (showing breakline):
<i class="bi bi-x-circle" data-toggle="tooltip" data-html="true" data-placement="top" title="test1 <br> test2"></i>
- Tip for Laravel and Blade programmers: You can convert \n to <br> with nl2br("string") function.
- The solutions above have been tested in Google Chrome 98.
There are multiple ways to do this. 
 or
depending on the browser. But the following example works for me on my Google Chrome and Firefox.
Tooltip
Using \x0A worked for me to get newline in title/tooltip on mouse hover.
FILENAME: news.php
<span onmouseover="getInfo(this,'06-APR-22')" data-html="true">Day</span>
FILENAME: news.php
<script>
function getInfo(x, dateVal) {
var html = $.ajax({
type: "POST",
url: "report/get-info.php",
data: {
'dateVal': dateVal,
},
success: function(response) {
x.setAttribute('title', response );
}
});
}
</script>
FILENAME: get-info.php
<?php
$tmp = $_POST['dateVal'];
$dateVal = date("m/d/Y", strtotime($tmp));
$querySelectCode = "SELECT INFO_ID, INFO_NAME FROM INFORMATION
WHERE TRUNC(DP.DATE_TIME) = TO_DATE('$dateVal','MM/DD/YYYY') ";
$stmtSelectcode = oci_parse($dbConn, $querySelectCode);
if ( ! oci_execute($stmtSelectcode) ){
$err = oci_error($stmtSelectcode);
trigger_error('Query failed: ' . $err['message'], E_USER_ERROR);
}
$INFO_ID = array();
while(oci_fetch($stmtSelectcode)){
$INFO_ID[] = oci_result($stmtSelectcode, 'INFO_ID');
$INFO_NAME[] = oci_result($stmtSelectcode, 'INFO_NAME');
}
for($index=0 ; $index < count($INFO_ID) ; $index++)
{
echo $INFO_NAME[$index ] . "\x0A" ;
}
?>
It is a hack, but it works - (tested on Google Chrome and mobile)
Just add non-breaking space, , till it breaks - you might have to limit the tooltip size depending on the amount of content but for small text messages this works:
etc
I tried everything above and this is the only thing that worked for me.
I have tried with
to display the title text on a new line and it’s working like a charm.
I am on Firefox 68.7.0 ESR and the
doesn't work. Breaking the lines via <CR> did work, so I am going with that since it simple and forward.
I.e.,
<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk
If you are trying to do this in a React project where you are rendering in the below format:
title={`First line of text ${varOne}
Second line of text ${varTwo}
Third line of text ${varThree}`}
Then
,
and similar solutions don't work. They will actually render as text.
Instead actually creating the text as required is a better option. An example for better understanding:
title={`First line of text ${varOne}
Second line of text ${varTwo}
Third line of text ${varThree}`}
Make sure to remove tabs/space indentations before "Second line of text" and "Third line of text". Otherwise they will render as well.
It was tested on Google Chrome 96 and Firefox 95.0b12 (Developer Edition, because, well why not). It should work on most modern browsers as well.
The "just press enter" solution didn't work here, so the good old vanilla JavaScript seems a pretty efficient and clean way.
function customTitle(event, textHeader, text){
let eventOrigin = event.target || event.srcElement;
eventOrigin.title = textHeader + '\n\n' + text;
}
And on element onmouseover:
onmouseover="customTitle(event, 'Some Caput', 'Some more or less complete description');"
Voilà! It works on Google Chrome and Firefox (which does not exclude others; I just didn't check it).