0

How to display image's alternative text when an user hovers on that image.

I have come across few posts that displays popups and views, but not the alternative text of the corresponding images. Some of the modules like qTip and Beautytips looks relevant but I suppose those modules doesn't deliver my requirements. If I'm wrong, please let me know how to use those modules to get the alternative text displayed on hover.

Are there any suggestions regarding how to get alternative text on image hover (possibly without views)

Here, I've created a basic page and in the body I've added an image using advanced text editor.

Improve this question

3 Answers 3

Reset to default
1

In the field settings for the image, make sure to 'Enable Title field' - this will present a text input for each content under the upload button. You can include the title here, and it will show on mouse over.

Improve this answer
6
  • I've edited my post. I'm not using content type to upload the image. I'm adding an image using advanced text editor options.
    – giri
    Commented Jan 31, 2015 at 1:05
  • Well, @GIRI, then you have to find a way to implement the title attribute there. I'm not sure, but I'ld guess that CKEditor or Media has that possibilty implemented.
    – leymannx
    Commented Aug 31, 2015 at 20:35
  • Last but not least you could write a little bit jQuery to automatically have the alt attribute set as title attribute @GIRI: stackoverflow.com/questions/1734806/…
    – leymannx
    Commented Aug 31, 2015 at 20:44
  • yup, sounds great.. I did that
    – giri
    Commented Aug 31, 2015 at 20:51
  • @GIRI - Would be nice to have your solution as a proper answer to your question. How you wrote and implemented what JS code exactly?
    – leymannx
    Commented Sep 2, 2015 at 1:14
0

I think what you are trying to do is in conflict with accessibility best practices. My understanding is that the alt attribute is only meant to be used for contexts where the image does not appear, and is not meant to be used as a compliment to the display of the image itself (as a tooltip or a description). In other words, I think the display of the alt text and the image are intended to be mutually exclusive.

Of course that does not mean that it's technically not possible to use the alt text as a tooltip (some ideas around that are discussed in this post), it's just discouraged.

Perhaps it would be best to refactor your content so that your hover text (that's intended to be used as a tooltip) is moved to the title attribute. This way you will be in-step with accessibility best practices and will automatically get native tooltip support from browsers.

I suppose that does not directly address your question, but it seems like the right note to start with.

Improve this answer
0

There might be different ways to address this issue, but based on my problem statement and requirements I found this solution is quite easy.

I'm injecting jQuery code and modifying the CSS to get the hover effect. My idea is firstly to insert hover text as a span through jQuery injection. Secondly, modify the CSS in such a way that the text span appears only on hover.

Refer JS FIDDLE for the example code.

I've used JSInjector module for injecting jQuery code and modified reset.css file

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.