在 div 内显示工具提示

Question

我的菜单很少，我在左侧导航栏中显示它们

 <li><a href= @RoleGroup><i class="menu-icon fa fa-users"></i> <span class="title"> Group Management</span></a></li>

我想在鼠标悬停在 div 上时显示工具提示（4-5 行）。在上面的代码中，我如何将工具提示放在 div 中，并具有良好的 css 风格。

谢谢。

Answer 1

您可以在元素中使用 title 属性。

例如： <li title=" here is the tool tip that i want "> ... </li>

http://www.w3schools.com/tags/att_global_title.asp

Answer 2

如果你想使用TipTip库，你可以这样做：

$(function(){
    $(".someClass").tipTip();
});



<p>
    Cras sed ante. Phasellus in massa. <a href="" class="someClass" title="This will show up in the TipTip popup.">Curabitur dolor eros</a>, gravida et, hendrerit ac, cursus non, massa.
    <span id="foo">
        <img src="image.jpg" class="someClass" title="A picture of the World" />
    </span>
</p>

Answer 3

您是否正在尝试让您悬停在上面的元素的文本显示在另一个 div 中？我们需要更多代码才能真正做到这一点，但这是一个开始：

$('.ulClass li').mouseover(function(){
     var myText = $(this).text();
     $(divIwantTextToShowIn).text(myText);
 });

$('.ulClass li').mouseleave(function(){

     $(divIwantTextToShowIn).text("");
 });

这将显示您将鼠标悬停在另一个 div 上的 li 中的文本。我猜这就是你要找的。当鼠标光标离开 li 时，它将清除 div.

的文本

在 div 内显示工具提示

Show Tooltip inside div

jquery

html

asp.net-mvc

tooltip