CODEWITHSUNDEEP
jqueryhtmlasp.net-mvctooltip
Bokambo
Bokambo

Reputation: 4480

Show Tooltip inside div

I have few menu , i am showing them in left navigation bar

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

I want to show Tooltip (4-5 lines) on mouse over inside a div. In above code how i can place tooltip inside div with good css style.

Thanks.

Upvotes: 2

Views: 1058

Answers (3)

Bryan Mudge
Bryan Mudge

Reputation: 432

Are you trying to make the text of the element you're hovering over display in another div? We'd need more code to really get this but here's a start:

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

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

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

That will display the text from the li that you hover over in another div. I'm guessing that is what you're looking for. When the mouse cursor leaves the li it will clear the text of the div.

Upvotes: 0

Clay Sills
Clay Sills

Reputation: 235

If you want to use the TipTip library, you can do it like this:

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

Upvotes: 1

Ben Behar
Ben Behar

Reputation: 364

You can use the title attribute in a element.

Ex: <li title=" here is the tool tip that i want "> ... </li>

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

Upvotes: 0

Related Questions