When hiding link text, the image link has an incomplete title

I think the <none> option should be removed. I think adding it was well-intentioned but a bad decision. It's not best practice to have a link without anchor text. The proper way to hide the text on a link is through CSS.

If you want to hide the text but still show on hover for all links, this is easily accomplished with:

a.follow-link {
  text-indent: -9999px;
}

If you want to show text for one service and hide for another, this can also be done in CSS. The following will hide it for Facebook only.

a.follow-link-facebook {
  text-indent: -9999px;
}

(The above assumes you've chosen a icon style that includes display:block; or display:inline-block; for a.follow-link. If the style doesn't include that, add it to the CSS above.)

The only use I see for the <none> option is is you want to allow for one person to hide the text on their social links while another person does not hide the text. But this would still be better accomplished by using a checkbox to indicate the text should be hidden. Then based on the value of the checkbox, add a specific class to the link's markup, such as follow-link-hidden-text, which would have the text-indent CSS applied.

The only ways to fix the "Follow site on" (empty) issue that <none> causes is to either:

1. Fall back to the default for the link's title attribute. But then you have an issue if someone doesn't want to use the default text as the title but still wants the title text hidden. If I want to hide the text but have it say on hover "Follow Joe on CompanyXYZ Facebook page", that's not possible.
2. Add 2 text boxes. One for the link title attribute and one for the visible title.

#2 is not a completely bad idea, but given that <none> causes a non-ideal empty anchor text rather than the preferred method of hiding link text via CSS, I think a better option is a text box for the title and a "hide text" check box.

@christinawithout, thanks for the attention you're providing to this module! Can you try out this patch? It moves the text hiding as an option on the block configure form.

I tested the patch from #2 and it works great, however I made some minor changes to it:

- Changed <none> to < none > in the documentation for follow_update_7005() as it wasn't displaying properly in update.php

- Removed the help text relating to using <none> for blank titles

Someone else should test my changes, otherwise this has my RTBC vote.

Good catches BWPanda. I think in <none> might be more appropriate than < none >.

I also found an issue with horizontal icons when "Hide Text" is true and the "Customized Name" for the link has a space in it, such as "Custom Name Facebook" or "Our Facebook Page". The div doesn't shrink to the size of the icon. It leaves blank space. (See screenshots for example.) This was corrected with white-space: nowrap applied if hide text is turned on. The issue appeared with all icon styles and was corrected for all with white-space: nowrap.

Other than that, the patch worked great.

The attached patch applies these 2 changes. If someone could give this patch a check, it might be ready for RTBC.

I noticed that in horizontal layout, the title ends up on the right (if the container is wide enough), but that's independent of this issue, so I opened an issue for it at #1851302: Follow block title is right (instead of left) of icons when horizontal layout is chosen.

I don't get it. I tried all these patches and all I get is an option to hide text, but text is still there when hovered (image attached). So that only hides the default text next to icon, but how do you hide the title text of ?

I actually managed to make it work on Firefox by deleting bunch of code inside follow.inc and follow.module, but Chrome and IE then gives me an empty title box/field with no text inside it when hovered, meanwhile Firefox doesn't show anything at all, which is perfect.

Since PHP is not my cup of tea, I do not really know what I was removing there, I know it was something related with [title] and 'Follow ...' message lines.

@vibrasphere - That's the correct behavior for the patch. This issue is about the link's title attribute being incomplete when titles are hidden, which the patch solves. What you're looking for is removing the title attribute, which is different functionality and belongs in a separate issue, because the title attribute should not be removed by default when the visible text is hidden.

The title attribute on the <a> tag/link is what you're seeing when you hover over the image. Displaying the title attribute on hover is a functionality of the browser. There's no way to control it other than removing the title attribute, which goes against best practice for SEO.

To do what you want, the module would need additional functionality added to remove the link attribute. If you'd like to request that, I suggest opening a new issue. (Though I wouldn't recommend putting an option in for something that goes against best practice. But your request might be resolved by rendering the links via a template, or since it's just a link, adding a hook that allows for altering the link options before rendering.)

As an alternative, here's some javascript you can add to a custom module. It accomplishes what you want by temporarily removing the title attribute from the link on hover. (If you want it removed from all links, change the selector from a.follow-link to just a.

(function ($) {
  Drupal.behaviors.myFollowLinkNoHoverTitle = {
    attach: function(context, settings) {		
      $('a.follow-link').hover(
        function () {
          $(this).data('title', $(this).attr('title'));
          $(this).removeAttr('title');
        },
        function () {
          $(this).attr('title', $(this).data('title'));
        });		
    }
  };
})(jQuery);

Yeah well I do understand it should have the title for SEO and etc. But for example in my block I have FB, Twitter, LinkedIn, RSS and Newsletter and they all say 'Follow my site on...' when hovered, but I use Newsletter icon for my contact page, clicking it, it sends user to contact form page with email details and etc. So when it says 'Follow my site on Newsletter' when its actually just a link to contact page doesn't really make sense.

Of course it would fix that if there was a way on adding a custom title attribute for each link, or at least that one (you know like in the Image field settings you can add an attribute and title for each image you upload, that would be nice).

Thanks for respond.

Latest patch works for me!

Great, thanks everyone for reviewing and fixing! Committed:

http://drupalcode.org/project/follow.git/commitdiff/1d0a515