Don't want to display HTML in title property of tag

Question

I have put HTML tag in <a title=""></a> tag

my <a> tag:

<a href="/survey/MyClicks/myclicks" class="toolLink" title="&lt;h2&gt;my clicks!&lt;/h2&gt; Group your contacts to target your &lt;span&gt;ASK&lt;/span&gt; to the specific people you want opinions from.">Clicks</a>

When I mouse over this tag it shows HTML tag as the title, but I don't want to display HTML tags in the title.

How can I solve this?

The title attribute is not formatted. If you want to have more fancy tooltips, shop around – there is any number of pure-CSS and JavaScript solutions for that. See, for example http://stackoverflow.com/questions/2049589/html-a-tag-title-formatting for a related question. — Christopher Creutzig, Jun 06 '12 at 11:33

score 0 · Answer 1 · answered Jun 06 '12 at 11:36

Remove the title attribute. If it is used, it is up to browsers to use it as a tooltip if they like, and usually they do like—such use is more or less the basic idea of the title attribute.

If there is a particular reason for having that attribute, like assumed impact on search engines, then you can keep the attribute in HTML but remove it with client-side JavaScript, using the removeAttribute() method.

score 0 · Answer 2 · answered Jun 06 '12 at 11:39

Either you should remove the HTML inside the tooltip, else you need some HTML Based Tips plugin like Tipsy.

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.

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

score 0 · Accepted Answer · answered Jun 06 '12 at 11:43

You can show the text in title and then you can remove the attribute.

var ttext;
$('.toolLink').hover(function(){
  ttext = $(this).attr('title');
  //$('.showTitle').text(ttext); //use only if you are displaying the title text
  $(this).removeAttr('title');
},function(){
  $(this).attr('title', ttext);
});

score 0 · Answer 4 · answered Jun 06 '12 at 11:43

I face the same problem and this is little bit tricky but I solve this problem using jquery like this.You are not tag this question with jquery but i think this help you.

 var attrTitleValue="";
 $('#YourAnchorTag').hover(function() {
                    attrTitleValue = $('#YourAnchorTag').attr("title");//Its depend upon you how you find your anchor tag
                    $('#YourAnchorTag').attr("title", "");
                }, function() {
                    $('#YourAnchorTag').attr("title", attrTitleValue);
                });

Don't want to display HTML in title property of tag

4 Answers4