Question

我有一个MVC应用程序。在那里我想显示工具提示消息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>

在上面的代码中，我在一个用脚本编写的函数中提到了'onmousover'和'onmouseout'。

脚本：

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');
    });
});

通过使用上面的脚本工具提示显示成功，很好，但主要问题是，工具提示显示在他的html位置，在该跨度'标签下方。我想用鼠标指针显示它。那你有另一种方法在工具提示中显示我的内容.. ??或者请告诉我我该怎么做.. ??

Answer 1

您必须安装bootstrap插件
然后在视图页面

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

在javascript中

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

然后在ajax上执行如下代码

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

希望这会有所帮助

Answer 2

将工具提示的css位置设置为绝对值： $（＆＃39;＃profile-tip＆＃39;）。css（＆＃39; position＆＃39;，＆＃39; absolute＆＃39;）;

然后使用保证金（正面或负面）放置它。

问候。

在MVC中的工具提示消息框中显示div内容

2 个答案: