使用鼠标悬停在图像上的工具提示标题？

Question

我想在图像上显示一个元素标题（工具提示大小）。我发现了当前元素的标题

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

downloadPdf 是元素的通用类。

实际上，我在底部有一个菜单栏，其中有一些图标。这些图标是功能性的。 在这里，我希望每当用户将鼠标悬停在这些图标上时，他们的标题必须出现在图像上。这张图片什么都不是，只是一个工具提示形状。

但是如何将它附加到图像上？并且它的位置必须只在元素上。那么我如何获得这个职位。如此困惑，并在这个小任务上花费了至少 3 个小时。任何帮助，将不胜感激。在有效使用 css 方面，我很糟糕。

Answer 1

好的。最简单最简单的方法是将title 属性添加到您的图像中。悬停此图像将导致本机浏览器工具提示显示在图像上。

检查此demo（将鼠标光标放在 pdf-icon 的图像上）。

here 也有人问过这些问题。

Answer 2

这是我在最后几分钟制作的一个有组织的演示：http://jsfiddle.net/47g8dnLx/1/

_HTML:

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

.icon 是每个图标的包装。 span 是工具提示文本。

演示只是一个工作演示。没有代码整洁或高效的意思！

请注意，我省略了 title=""，因为自定义工具提示不需要它。

Answer 3

你好我想你想修改标题

现在已经习惯了这个代码

$.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

Answer 4

我刚刚找到它（不是我做的）。

 $(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" />