blocks|key|1468866|text|我建议使用qTip。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1468867|entityMap|0|LINK|mutability|MUTABLE|url|http://craigsworks.com/projects/qtip/demos/^0|5|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>I suggest <a href="http://craigsworks.com/projects/qtip/demos/" rel="noreferrer">qTip</a>.</p>


blocks|key|1468843|text|工具提示插件对于你需要的东西来说可能太重了。只需使用您希望在工具提示中显示的文本设置“title”属性即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1468844|$("#yourElement").attr('title',+'This+is+the+hover-over+text');|code-block|syntax|javascript|1468845|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Tooltip plugin might be too heavyweight for what you need. Simply set the 'title' attribute with the text you desire to show in your tooltip.</p>

<pre><code>$("#yourElement").attr('title', 'This is the hover-over text');
</code></pre>


blocks|key|1254243|text|下面的代码将非常有用(假设你有"id"="myId"的div/span/table/tr/td/etc+)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1254244|++++$("#myId").hover(function()+{
++++++++$(this).css('cursor','pointer').attr('title',+'This+is+a+hover+text.');
++++},+function()+{
++++++++$(this).css('cursor','auto');
++++});|code-block|syntax|javascript|1254245|作为补充，.css('cursor','pointer')会在鼠标悬停时改变鼠标指针。|1254246|entityMap^0|F|B|0|0|5|O|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>Following will work like a charm (assuming you have div/span/table/tr/td/etc with <code>"id"="myId"</code>)</p>

<pre><code>    $("#myId").hover(function() {
        $(this).css('cursor','pointer').attr('title', 'This is a hover text.');
    }, function() {
        $(this).css('cursor','auto');
    });
</code></pre>

<p>As a complimentary, <code>.css('cursor','pointer')</code> will change the mouse pointer on hover.</p>


blocks|key|1254196|text|您可以使用bootstrap+tooltip。别忘了初始化它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1254197|<span+class="tooltip-r"+data-toggle="tooltip"+data-placement="left"+title="Explanation">
inside+span
</span>|code-block|syntax|javascript|1254198|将在左侧显示文本说明。|1254199|并使用js运行它：|1254200|$('.tooltip-r').tooltip();|1254201|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/javascript/#tooltips^0|F|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>You can use bootstrap <a href="http://getbootstrap.com/javascript/#tooltips" rel="noreferrer">tooltip</a>. Do not forget to initialize it.</p>

<pre><code>&lt;span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation"&gt;
inside span
&lt;/span&gt;
</code></pre>

<p>Will be shown text Explanation on the left side.</p>

<p>and run it with js:</p>

<pre><code>$('.tooltip-r').tooltip();
</code></pre>


blocks|key|1468884|text|由于推荐的qTip和其他项目都很旧，我建议您使用qTip2，因为它是最新的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1468885|entityMap|0|LINK|mutability|MUTABLE|url|http://craigsworks.com/projects/qtip2/^0|O|5|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>As recommended qTip and other projects are quite old I recommend using <a href="http://craigsworks.com/projects/qtip2/" rel="nofollow">qTip2</a> as it is most up-to-date.</p>


blocks|key|1468981|text|你可以只使用css而不使用任何jQiuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1468982|<a+class="tooltips">
++++Hover+Me
++++<span>My+Tooltip+Text</span>
</a>
<style>
++++a.tooltips+{
++++++++position:+relative;
++++++++display:+inline;
++++}

++++++++a.tooltips+span+{
++++++++++++position:+absolute;
++++++++++++width:+200px;
++++++++++++color:+#FFFFFF;
++++++++++++background:+#000000;
++++++++++++height:+30px;
++++++++++++line-height:+30px;
++++++++++++text-align:+center;
++++++++++++visibility:+hidden;
++++++++++++border-radius:+6px;
++++++++}

++++++++++++a.tooltips+span:after+{
++++++++++++++++content:+'';
++++++++++++++++position:+absolute;
++++++++++++++++top:+100%25;
++++++++++++++++left:+35%25;
++++++++++++++++margin-left:+-8px;
++++++++++++++++width:+0;
++++++++++++++++height:+0;
++++++++++++++++border-top:+8px+solid+#000000;
++++++++++++++++border-right:+8px+solid+transparent;
++++++++++++++++border-left:+8px+solid+transparent;
++++++++++++}

++++a:hover.tooltips+span+{
++++++++visibility:+visible;
++++++++opacity:+0.8;
++++++++bottom:+30px;
++++++++left:+50%25;
++++++++margin-left:+-76px;
++++++++z-index:+999;
++++}
</style>|code-block|syntax|javascript|1468983|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can do it using just css without using any jQiuery.</p>

<pre><code>&lt;a class="tooltips"&gt;
    Hover Me
    &lt;span&gt;My Tooltip Text&lt;/span&gt;
&lt;/a&gt;
&lt;style&gt;
    a.tooltips {
        position: relative;
        display: inline;
    }

        a.tooltips span {
            position: absolute;
            width: 200px;
            color: #FFFFFF;
            background: #000000;
            height: 30px;
            line-height: 30px;
            text-align: center;
            visibility: hidden;
            border-radius: 6px;
        }

            a.tooltips span:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 35%;
                margin-left: -8px;
                width: 0;
                height: 0;
                border-top: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

    a:hover.tooltips span {
        visibility: visible;
        opacity: 0.8;
        bottom: 30px;
        left: 50%;
        margin-left: -76px;
        z-index: 999;
    }
&lt;/style&gt;
</code></pre>


blocks|key|1254349|text|对于最新/最新的解决方案，你可以尝试Tippy.js它是完整的工具提示，弹出窗口，下拉菜单和web解决方案，由Popper提供支持。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1254350|Tippy.js|offset|length|1254351|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/atomiks/tippyjs^0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>For Latest/Up to date solution you may try Tippy.js it's the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.</p>
<p><a href="https://github.com/atomiks/tippyjs" rel="nofollow noreferrer">Tippy.js</a></p>


blocks|key|1254413|text|正如在大多数答案中提到的，与这里的需求相比，插件的使用会很繁重。这就是为什么这里有另一个解决方案，只需使用简单的HTML、CSS和JQuery代码就可以获得所需的输出。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1254414|使用CSS将给我们一个更好的视图，请检查下面的代码|1254415|​|1254416|$(".tool-tip").attr('title-new',+'another+example+to+display+the+hover-over+texts');|code-block|syntax|javascript|1254417|button+{
++++background:+aqua;
++++padding:10px;
++}+
++.tool-tip[title-new]:hover:after+{
++++++content:+attr(title-new);
++++++position:+absolute;
++++++border:+#c0c0c0+1px+dotted;
++++++padding:+10px;
++++++display:+block;
++++++z-index:+100;
++++++background-color:+#000000;
++++++color:+#ffffff;
++++++max-width:+200px;
++++++text-decoration:+none;
++++++text-align:center;
++++}|1254418|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>hover+on+the+button+below+to+check+the+results</p>
<button+class="tool-tip">Here+I+am</button>|1254419|1254420|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|U|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|M|3|N|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|O|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>As mentioned in most of the answers the uses of plugins would be heavy compared with the requirements here. which is why here's another solution to get the required output just with simple HTML, CSS &amp; JQuery code.</p>
<p>using CSS will give us a better view, check the code below</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(".tool-tip").attr('title-new', 'another example to display the hover-over texts');</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>button {
    background: aqua;
    padding:10px;
  } 
  .tool-tip[title-new]:hover:after {
      content: attr(title-new);
      position: absolute;
      border: #c0c0c0 1px dotted;
      padding: 10px;
      display: block;
      z-index: 100;
      background-color: #000000;
      color: #ffffff;
      max-width: 200px;
      text-decoration: none;
      text-align:center;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;p&gt;hover on the button below to check the results&lt;/p&gt;
&lt;button class="tool-tip"&gt;Here I am&lt;/button&gt;</code></pre>
</div>
</div>
</p>


<p>As the title states, how can I display a tooltip message on hover using jQuery?</p>


How can I display a tooltip message on hover using jQuery?

正如标题所述，如何使用jQuery在悬停时显示工具提示消息？

问如何使用jQuery在悬停时显示工具提示消息？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery在悬停时显示工具提示消息？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery在悬停时显示工具提示消息？
EN