how to hide default title when using tooltip?

**PicnicTutorials** · Oct 26, 2012 04:33

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
}

**mrhoo** · Oct 26, 2012 11:36

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

**PicnicTutorials** · Oct 26, 2012 11:40

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.

**paul_wilkins** · Oct 26, 2012 16:22

Originally Posted by EricWatson

Thanks. Ya I found plenty of ways to remove it. But in doing so my CSS tooltip pops up empty.

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.

**PicnicTutorials** · Oct 26, 2012 16:31

Originally Posted by paul_wilkins

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/show...r-over-element. If we could combine these two fixes, and add css3 transitions, then we have a perfect non-full JS alternative.

**paul_wilkins** · Oct 26, 2012 16:53

Originally Posted by EricWatson

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/show...r-over-element. If we could combine these two fixes, and add css3 transitions, then we have a perfect non-full JS alternative.

Sure thing.

Code javascript:

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.

**PicnicTutorials** · Oct 26, 2012 18:34

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.

Code:

<!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>

**paul_wilkins** · Oct 26, 2012 18:37

Originally Posted by EricWatson

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.

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

**PicnicTutorials** · Oct 26, 2012 18:44

Originally Posted by paul_wilkins

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

**paul_wilkins** · Oct 26, 2012 18:49

Originally Posted by EricWatson

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/

**PicnicTutorials** · Oct 26, 2012 18:54

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.

**paul_wilkins** · Oct 26, 2012 18:58

Originally Posted by EricWatson

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.

User Tag List

Thread: how to hide default title when using tooltip?

Thread Tools

Display

how to hide default title when using tooltip?

Bookmarks

Bookmarks

Posting Permissions