Question

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

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

downloadPdf是元素的通用类。

其实我底部有一个菜单栏，里面有一些图标。这些图标功能齐全。在这里，我希望每当用户将鼠标悬停在这些图标上时，他们的标题必须覆盖图像。这个图像什么都没有，只是一个工具提示形状。

但如何将其附加到图像上？它的位置必须只在元素上。那我该如何获得这个职位呢？如此困惑，至少花了3个小时完成这项小任务。任何帮助，将不胜感激。当我有效地使用css时，我非常糟糕。

Answer 1

以下是我在过去几分钟内制作的有组织的演示：http://jsfiddle.net/47g8dnLx/1/

<子> HTML：

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

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

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

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

Answer 2

确定。最简单，最简单的方法是为图片添加title属性。将鼠标悬停在此图像上将导致本机浏览器工具提示显示在图像上。

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

此外，这些问题已经被问到here。

Answer 3

嗨，我想你想要修改标题

现在习惯了这段代码

＆＃13;

$.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(); });

＆＃13;

.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;}

＆＃13;

<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">

＆＃13;

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

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

4 个答案:

<子> HTML：