Tooltip and the Title attribute

[jglinsek]

Some elements in Bootstrap are styled based on the presence of the Title attribute. For example, the <abbr> tag with a title attribute gets styled with a help cursor and underlined text. However, when using the tooltip directive with the <abbr> tag (<abbr tooptip="some tip">content</abbr>), the lack of a title leaves the tag un-styled.

You can put an empty title attribute on the element to fix it, which is maybe a decent workaround, but i was wondering, in this case, if the directive ought to do that automatically to preserve styling given that the Bootstrap tooltip component typically gets it's content from a title? In this case, that is what I expected to have happen.

http://plnkr.co/DPe7UjUpNj4adgFKizkT

[joshdmiller]

Well that sucks. This is a side-effect of the differences between jQuery and AngularJS development. I'm sure more of these kinds of things will crop up, but I don't think having the tooltip do this automatically would fit well with the project philosophy. We are trying to create generalized components that can fit any style, defaulting of course to Twitter Bootstrap. Including a workaround for a rather obscure case (i.e. only for abbr) only for Bootstrap is probably not a good idea.

It's stupid that you have to add the title attribute to get the styling to work in this case, but I think it's the best of the workarounds, considering. :-(

@angular-ui/bootstrap Anyone beg to differ?

[pkozlowski-opensource]

Agree with @joshdmiller, this really sucks... And I agree that we shouldn't be adding the title attribute inside the tooltip directive, this would be very bizarre.

What we could do, though is to read tooltip's content from the title attribute as well. In this case people would write:

<span tooltip title="Tooltips are awesome, you should totally use them!">extended information</span>

Just checked the Foundation's tooltips and those can work off the title too:
http://foundation.zurb.com/docs/components/tooltips.html

@joshdmiller would it be hard to implement? Does it make sense to you?

[joshdmiller]

@pkozlowski-opensource Nah, it'd be crazy simple.

But it would have a curious side-effect for the popover. The $tooltip service by default uses the name of the directive as the primary attribute. So tooltip is "tooltip" and popover is "popover". But the popover doesn't have a title by default, so we store the default attribute in both directives as the variable content. Makes sense as the tooltip only has content anyway.

The weird effect of this change though would be that these two would be equivalent:

<a popover="My Popover Content" popover-title="Title">Click me!</a>

<a popover title="My Popover Content" popover-title="Title">Click me!</a>

It don't think it'd hurt. It's just odd. But I suppose it's possible for an existing title attribute on a popover element to get in the way. Also, upstream the popover uses the title attribute for its title. So it may be confusing.

However, I did have another idea. We could add a parameter to $tooltip to specify aliases for the default attribute (third param):

// create the `popover` directive
// it doesn't need any alias
$tooltip( 'popover', 'popover', [], 'click' );

// create the `tooltip` directive
// also accept the `title` attribute for the content
$tooltip( 'tooltip', 'tooltip', [ 'title' ], 'mouseenter', 'mouseleave' );

The change would be pretty simple:

// existing code...
function setContent ( val ) {
  scope.tt_content = val;
}

// new code...
if ( angular.isArray( aliases ) && aliases.length > 0 ) {
  angular.forEach( aliases, function ( alias ) {
    attrs.$observe( alias, setContent );
  });
}

// existing code...
attrs.$observe( type, setContent );

It's a pretty simple change. What do y'all think?

[petebacondarwin]

I think you should just add a title attribute to the directive's element.
This feels right, semantically, with the HTML spec anyway: title
attributes provide extra information about the element.
Sometimes you can be "too" generic.

On 9 April 2013 20:37, Josh D Miller notifications@github.com wrote:

@pkozlowski-opensource https://github.com/pkozlowski-opensource Nah,
it'd be crazy simple.

But it would have a curious side-effect for the popover. The $tooltipservice by default uses the name of the directive as the primary attribute.
So tooltip is "tooltip" and popover is "popover". But the popover doesn't
have a title by default, so we store the default attribute in both
directives as the variable content. Makes sense as the tooltip only has
content anyway.

The weird effect of this change though would be that these two would be
equivalent:

Click me!

Click me!

It don't think it'd hurt. It's just odd. But I suppose it's possible
for an existing title attribute on a popover element to get in the way.
Also, upstream the popover uses the title attribute for its title. So it
may be confusing.

However, I did have another idea. We could add a parameter to $tooltip to
specify aliases for the default attribute (third param):

// create the popover directive// it doesn't need any alias$tooltip( 'popover', 'popover', [], 'click' );
// create the tooltip directive// also accept the title attribute for the content$tooltip( 'tooltip', 'tooltip', [ 'title' ], 'mouseenter', 'mouseleave' );

The change would be pretty simple:

// existing code...function setContent ( val ) {
scope.tt_content = val;}
// new code...if ( angular.isArray( aliases ) && aliases.length > 0 ) {
angular.forEach( aliases, function ( alias ) {
attrs.$observe( alias, setContent );
});}
// existing code...attrs.$observe( type, setContent );

It's a pretty simple change. What do y'all think?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/309#issuecomment-16135125
.

[jglinsek]

@joshdmiller One wrinkle in that is that you have to remove the content from the Title tag, otherwise it will still be displayed natively by the browser the way a tooltip usually display. So, now you end up with the nice styled Tooltip display AND the native tooltip display which is of course not desirable.

I updated the plunker with that scenario:
http://plnkr.co/DPe7UjUpNj4adgFKizkT

I do think using the title attribute (at least for tooltips) is a good way to go because as @petebacondarwin stated, it makes your basic html more semantically correct (for my current use case I don't care but I'm sure many folks might). Again, you'd have to remove the content from the title at run time if you go this way,

Side note: you might want to consider updating the project Readme/Description/Name based upon your first comment if that is truly the direction. Example, the description of the project says "Native AngularJS (Angular) directives for Twitter's Bootstrap." - which doesn't jive with your comment: "We are trying to create generalized components that can fit any style". And of course, the name of the project is "bootstrap", so that comment surprised me a bit!

[joshdmiller]

@jglinsek You're right. I forgot that Twitter migrated title to original-title. But I certainly don't think we should add in a bunch of workaround code to allow using the title attribute before moving it out of the title attribute and into a different attribute to prevent the browser's default tooltip from showing too.

So in that case then my original comment stands: just add title="" manually on an abbr even though it's stupid.

To your side note, you're right - it's a little confusing. It's one of our secrets. Bootstrap is the most common framework (by far!) so we're riding that wave to gain some steam - plus it's relatively comprehensive which provides a great foundation to get some solid UI components. But we've been writing the components with an eye toward some Twitter Bootstrap competition in the near-to-mid-future (e.g. Foundation).

[joshdmiller]

As we can currently add the title="" attribute manually (though annoying it may be) to solve this issue, I'm going to close this for now. If someone wants to reopen it with a compelling argument or an interesting new solution, I'd be happy to discuss it.