How to hide default title when using tooltip?

how to hide default title when using tooltip? Im using css and the code below to show a tooltip. It pulls from the title attribute. But currently both the tooltip and the default title popup. Is the there a way to hide the title but keep the tooltip? Thanks!

<a class=“tooltip” title=“Share On Facebook”></a>

.tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}
.tooltip:hover:after{
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
bottom:33px;
color:#fff;
content:attr(title);
display:block;
left:-50px;
padding:8px 0;
position:absolute;
white-space:nowrap;
z-index:98;
width:140px;
text-align:center;
}
.tooltip:hover:before{
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:27px;
content:“”;
display:block;
left:-10px;
position:absolute;
z-index:99
}

You cannot hide a title, but you can use element.removeAttribute(‘title’) to remove it.

Thanks. Ya I found plenty of ways to remove it. But in doing so my CSS tooltip pops up empty. I figure this is a no go. I’m just going to put the tip in a span and be done with it.

You would store the existing title in a variable for use by your custom tooltip, remove the title from the element so that the default one doesn’t appear, then when your custom tooltip is finished you would put the title back on the element so that things are ready for the next occurance.

Could you be so kind as to show me what that would look like? Paul over in the css forum posted a way to auto center the tooltip without a width with either the tiltle or a span technique. http://www.sitepoint.com/forums/showthread.php?901942-CSS-tooltip-how-to-auto-center-over-element. If we could combine these two fixes, and add css3 transitions, then we have a perfect non-full JS alternative.

Sure thing.


function exitHandler = function (el) {
    el.title = cachedTitle;
};

var cachedTitle = el.title;
el.title = '';

fancyTooltip({
    target: el,
    title: cachedTitle,
    onExit: exitHandler
});

Depending on how your fancy tooltip works, it could be something like that.

Cool! Ok here is where I’m at - which is not far. I really have no idea what to do with that? Thanks for any help. :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
.tooltip{position:relative}
 .tooltip:hover:after{
	position:absolute;
	top:20px;
	left:0;
	width:150px;
   background:#111;
   background:rgba(0,0,0,.8);
   border-radius:5px;
   color:#fff;
   content:attr(title);
   padding:8px 0;
   white-space:nowrap;
   z-index:98;
	text-align:center;
  }
  .tooltip:hover:before{
    border:solid;
    border-color:#111 transparent;
    border-width:6px 6px 0 6px;
    bottom:27px;
    content:"";
    left:-10px;
    position:absolute;
    z-index:99
   }
</style>
<script type="text/javascript">
function exitHandler = function (el) {
    el.title = cachedTitle;
};

var cachedTitle = el.title;
el.title = '';

.tooltip({
    target: el,
    title: cachedTitle,
    onExit: exitHandler
});
</script>
</head>
<body>

<a class="tooltip" title="Share With Email">TOOLTIP</a>

</body>
</html>

Do you have a scripting library that provides the custom tooltip? If not, then that sample of code won’t do anything for you.

Nope its css. Thats why I need to remove the title. All the js ones on the web remove it as part of the plugin. I have jquery on the page too if that helps

Okay, so due to your CSS hover effect doing its thing, I’m not sure if there’s any way for scripting to remove the existing tooltip without affecting the CSS that’s using it too.

How about something like this instead? http://sixrevisions.com/css/css-only-tooltips/

Ya something like that was my back up. But if someone could figure out how to remove the title (yet css use it) then that would be cleaner. And better on google too. No black hat mistakes.

If you use the tooltip attribute, then browsers are going to tooltip it for you, regardless of what other CSS stuff that you do.

From the demo, the technique is to not use the tooltip attribute, but to place the intended text in a hidden span next to the word instead.