Tooltip title on image using mouseover?

Question

I want to display an element title on the image(tooltip size). I found out the current element title

$('.downloadPdf').mouseover(function(){
    var currentelement = $(this).attr('title');
});

downloadPdf is common class on elements.

Actually I have a menu bar in bottom in which I have some icons. These icons are functional. Here I want whenever a user hovers over these icons, their title must come over the image. This image is nothing, just a tooltip shape.

But how to append it on image? And its position must be on the element only. so how do I get the position also. So confused and spend at least 3 hours on this small task. Any help would be appreciated. I am so bad when it comes to use css effectively.

If it's hover,only, I suggest CSS only, don't need JS on this task. — Daniel Cheung, Nov 04 '14 at 10:34
A title on an image will automatically show up as a tooltip! — Abhitalks, Nov 04 '14 at 10:34
Wait, if you have already a `title=""`, doing this will get you 2 tooltips? — Daniel Cheung, Nov 04 '14 at 10:34
http://jsfiddle.net/jub3t7ru/ please hover on the sentence, is that what you want? — Daniel Cheung, Nov 04 '14 at 10:36
@Robin I don't know about that one, but it is definitely not W3's recommendation on making the browser render engine. — Daniel Cheung, Nov 04 '14 at 10:37
No its coming by default DanielCheung I want in the format that I designed as an image. That is why I want to add this image to tooltip. — Nitu Dhaka, Nov 04 '14 at 10:37
@NituDhaka so are you asking to make a tooltip that displays an image? — Daniel Cheung, Nov 04 '14 at 10:39
it's getting a bit confusing. when the mouse hovers over an image do you want to display image name or something else? — Robin, Nov 04 '14 at 10:40
"*I want to display an element title on the image*" - the actual `title` tooltip, or a styled element? "*(tooltip size)*" - what does that mean, exactly? "*downloadPdf is common class on elements. but how to append it to on image*" - you want to add a class to an `` element? Take some time, edit and improve your question so that it can be understood. I realise you may not speak English fluently, but if you could ask a friend to review your question, it would be a good idea to do so. — David Thomas, Nov 04 '14 at 10:43
@NituDhaka Can you give an example in "When the element is (text/image/has class xxx), I want it to display (text:xxx/image/xxx)"? — Daniel Cheung, Nov 04 '14 at 10:44
Oh I think I didn't explain it properly. give me 5 mins let me edit once the question with proper example. — Nitu Dhaka, Nov 04 '14 at 10:46
@DavidThomas Your advice is a great one, I hate people just vote down questions and not explain. Your tip should be displayed when someone makes a question. Sadly, Meta is not too great of a platform, just saying. :) — Daniel Cheung, Nov 04 '14 at 10:46
then visit this link it http://craigsworks.com/projects/qtip/demos/ — Robin, Nov 04 '14 at 10:52
hi @NituDhaka now you can used to this http://jsfiddle.net/jyvpfd4p/ and how to create this http://rohitazadmalik.blogspot.in/2014/03/how-to-create-tooltips-with-jquery.html — Rohit Azad Malik, Nov 04 '14 at 10:56
i suggest you wait for other people to answer and if their answer is better you implement that if not then use this plugin.because adding a plugin will increase the load time of your page by little bit. — Robin, Nov 04 '14 at 10:56
@NituDhaka: Is this what you are looking for: http://jsfiddle.net/abhitalks/cs822gg7/1/ — Abhitalks, Nov 04 '14 at 11:15

score 5 · Accepted Answer · edited May 23 '17 at 10:33

5

Ok. The easiest and simpliest way is to add title attribute to your image. Hovering this image will cause the native browser tooltip to show over the image.

Check this demo (place your mouse cursor over the image of pdf-icon).

Also these questions has already been asked here.

edited May 23 '17 at 10:33

Community

1
1

answered Nov 04 '14 at 11:04

CmajSmith

432
2
8

yes it occurs by default rit? so can we change the design of default tooltip? – Nitu Dhaka Nov 04 '14 at 11:06
Simple answer: no. But there is a way to make your own tooltip and show it instead of native one. But this demands changes in your html. I will make an example in 10 mins. – CmajSmith Nov 04 '14 at 11:09

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

Here is an organized demo I made in the last few minutes: http://jsfiddle.net/47g8dnLx/1/

_HTML:

<div class="icon">
    <img src="path/to/image">
    <span>Text</span>
</div>

.icon is the wrapper of each icon. span is the tool tip text.

The demo is just a working demo. No mean of code tidiness or efficient!

Please note that I omitted the title="" because it's not needed for custom tool tips.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 04 '14 at 11:07

Daniel Cheung

4,779
1
30
63

+1 Good one Daniel. In fact you could use the `title` as well if required. http://jsfiddle.net/abhitalks/47g8dnLx/2/ – Abhitalks Nov 04 '14 at 11:20
@abhitalks Well... :/ Adding title in there just adds more code and the span's content renders useless. _If possible_, putting the title in the `` would be a better alternative. – Daniel Cheung Nov 04 '14 at 11:23

score 1 · Answer 3 · answered Nov 04 '14 at 11:21

Hi i think you want to this modify title

now used to this code

$.fn.autoSuggest = function(){   return this.each(function(index, elm){ 
if(!$(elm).is('[data-title]')){ 
$(elm).attr('data-title', $(elm).attr('title')).attr('title', ''); 
}; 

$(elm).on('mouseenter', function(){ 
var element = $(this), 
posTop = element.offset().top + element.outerHeight() + 10, 
posLeft = element.offset().left, 
toolTipWidth = element.outerWidth() > 90 ? element.outerWidth() : 250, 
titleText = element.attr('data-title'); 
if(titleText && titleText != ''){ 
$('<div />', {class: 'autoSugest', text : titleText, css : {left: posLeft, top: posTop, maxWidth: toolTipWidth}}).appendTo('body').fadeIn(); 
}else{ 
return false; 
} 
}); 
$(elm).on('mouseout', function(){ 
$('.autoSugest').fadeOut(function(){ 
$(this).remove(); 
}); 
}); 
}); }; 
$(document).ready(function(){ 
    $('.title').autoSuggest(); });

.downloadPdf {
    width:64px;
    height:64px
}

.autoSugest{background:#fffdef;border:1px solid #cac6ad; 
-webkit-border-radius:4px; 
-moz-border-radius:4px; 
border-radius:4px;color:#7f7943; 
display:none; 
font-size:12px; 
padding:7px 15px; 
position:absolute; 
min-width:100px; 
-o-box-sizing:border-box; 
-ms-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box;}

.autoSugest:after{ 
content:"";
 border-left: solid 10px transparent;
border-right: solid 10px transparent;
border-bottom: solid 10px #cac6ad;
position: absolute;
top: -11px;
left: 12px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img class="downloadPdf title" src="http://icons.iconarchive.com/icons/graphicloads/filetype/256/pdf-icon.png" title="Text for tooltip">

How to create tooltip

Demo Fiddle

score 0 · Answer 4 · answered Oct 20 '20 at 00:36

I just found it (not done by me).

 $(document).ready(function() {
   $('img').hover(function() {
     // Hover over code
     var title = $(this).attr('alt');
     $(this).data('tipText', title);
     $('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow');
   }, function() {
     // Hover out code
     $(this).attr('alt', $(this).data('tipText'));
     $('.tooltip').remove();
   });
 });

            .tooltip {
                display: none;
                position: absolute;
                border: 1px solid #333;
                background-color: #161616;
                border-radius: 5px;
                padding: 10px;
                color: #fff;
                font-size: 12px Arial;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo" />

Tooltip title on image using mouseover?

4 Answers4

HTML:

_HTML: