CODEWITHSUNDEEP
jqueryhtmlasp.net-mvctooltip
Rahul Chaudhari
Rahul Chaudhari

Reputation: 148

Display div content in Tooltip message box in MVC

I have One MVC application. In that I want to display tooltip message onhover my html div.

Html:

<li class="Limenu" data-placement="right">
<span class="LessMenuspan btn-primary" pid="@i.ConsumerNo_"  onmouseover="FacebookprofileTip(1, 0,this)" onmouseout="FacebookprofileTip(0, 1,this);" data-toggle="modal" data-target="#ConsumerInfo">XX</span><br />
<span class="Menuspan btn-primary" pid="@i.ConsumerNo_"  onmouseover="FacebookprofileTip(1, 0,this)" onmouseout="FacebookprofileTip(0, 1,this);" data-toggle="modal" data-target="#ConsumerInfo">YY</span><br />
<div class="row" style="display:none" id="profile-tip"></div>

In Above code i mentioned 'onmousover' and 'onmouseout' on one function written in script.

Script:

function FacebookprofileTip(post, delay,e) {
    var h = $(e).attr("pid");
    if (delay == 1) {
        clearInterval(TipTimer);
        $('#profile-tip').mouseleave(function () {
            $('#profile-tip').css('display', 'none');
        });
        $(e).mouseleave(function () {
            $('#profile-tip').css('display', 'none');
        });
    } else {

        TipTimer = setInterval(function () {
            var elem = $(e);
            var elemXY = elem.offset();
            var NewY = elemXY.top ;
            var NewX = elemXY.left;
            // The position to be increased
            var height = NewY +'px';
            var left = (NewX-80)+'px';
            // Start displaying the profile card with the preloader
           $('#profile-tip').html('<div class="profile-tip-padding"><div class="loader"></div></div>');
            // Set the position of the profile card

           $('#profile-tip').css('margin-left', left);
            $.ajax({
                type: "POST",
                datatype: 'json',
                url: '@Url.Action("GetTooltipInfo","Admin")',//Sending request to controller.
                data: { HoverId: h },
                cache: false,
                success: function (html) {                                                                                                                                                                                               
                    var $MainDiv = $(" <div class='row col-xs-offset-1'><div class='row'><div class='col-sm-3'><img src=" + html.ToolPhoto + " /></div><div class='col-sm-9'><label>" + html.ToolName + "</label></div></div></div>");
                    $('#profile-tip').append($MainDiv);
                    $('#profile-tip').css('display', 'block');

                }
            });
           clearInterval(TipTimer);
        }, 500);
    }
}
$(document).ready(function () {
    $('#profile-tip').mouseleave(function () {

        $('#profile-tip').css('display','none');
    });
});

By using above script tooltip is displayed successfully, fine, But main problem is that, the tooltip is displaying on his html location, below that span' tags. I want to display it with mouse pointer. So have you another way to display my content in tooltip..?? or Please tell me how can i do that..??

Upvotes: 0

Views: 1712

Answers (2)

anand
anand

Reputation: 1579

You have to install the bootstrap plugin
Then in the view page 

<a class="barcode" id="barcode" data-toggle="tooltip" rel="tooltip" data-html="true" title="Your data">Data</a>

In the javascript 

    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip(); 
        })
    </script>

Then on ajax do code like below

<script>
    $(document).ready(function(){
        $ajax({
            .
            .
            success:function(e)
            {
                var value =  "<div></div>"
                $('#barcode').attr("title", value)
            }
        });
    });
</script>

hope this helps

Upvotes: 1

Mathieu DOMER
Mathieu DOMER

Reputation: 601

Set the css position of the tooltip to absolute : $('#profile-tip').css('position', 'absolute');

Then place it using margin (positive or negative).

Regards.

Upvotes: 1

Related Questions