How to style the string of an tag?

Question

Is there a way to style the alt? With javascript? With pseudo attributes? like this:

This is the caption&l         


        

Answer 1

This is not possible with the alt attribute.

I recommend using a jQuery Tooltip plugin to get this effect:

http://flowplayer.org/tools/tooltip/index.html

Answer 2

It's the alt attribute, not tag, and it's not possible to style it directly. It's simply a piece of text that is displayed if the image fails to load. You can style the <img> element though and it will affect the styling of the alternative text in most browsers (though not IE).

If you were referring to the tooltip that appears in some browsers when you hover over an image, that's achieved with the title attribute and works on all elements, not just images. The alt attribute is also used by IE for this purpose on images, but this is not standard. Either way, title tooltips cannot be styled. If you need fancier tooltips, you'll have to create your own. I imagine there's a plethora of such things out there.

Answer 3

Not really desirable if you are looking for some sort of tool tip plugin maybe try something like tipsy

http://onehackoranother.com/projects/jquery/tipsy/

or see here for more examples

http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

(*note no affiliations)

Answer 4

No, you can't nest tags inside the attribute value as you have done. However, you can use JavaScript/JQuery to extract the value into a DIV and style that.

I wrote a simple plugin to do just that, with a bit of hacking it'll do what you want I think.

Edit: What you could do (though it's a bit hacky) is to use the following in your alt attribute:

<img id="myimg" src="foo.jpg" alt="This is the caption|This is some text" />

Then in whatever code you're using, you can split on the pipe character and surround each part with the appropriate tags, something like this:

var img = $('#myimg');
var alt = img.attr('alt').split('|');

var divContents = '<h1>' + alt[0] + '</h1><p>' + alt[1] + '</p>';

Answer 5

What you are trying to achieve is styling alt text when image is somehow not displayed. Alt is not an element so you can't style it directly but what you can do to achieve the desired result is by setting font-size on img element.

JSfiddle Demo

img{
  font-size: 16px;
}

.small-alt-text{
  font-size:8px;
}
.big-alt-text{
  font-size:24px;
}

<img src="0.png" alt="Image failed to load" />
<br>
<img class="small-alt-text" src="0.png" alt="Image failed to load" />
<br>
<img class="big-alt-text" src="0.png" alt="Image failed to load" />

Answer 6

Tim Down is right you cannot style an alt attribute, but yet you can use jQuery for instance to show a custom popup window that you can style as a separate html page.

http://jquery.com/

http://flowplayer.org/tools/tooltip/index.html

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/