Question

我使用我在SO中找到的以下工具提示代码，目前文本在标题部分是硬编码的，问题是我需要在不同的标签中使用它，不同的文本标题而不是硬编码到所有标签，如何更改它以支持具有不同标题文本的任何标签。

 <div class="form-group">
                @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Name)
                    <span class="label label-primary mytooltip">?</span>
                    @Html.ValidationMessageFor(model => model.Name)
                </div>

        </div>

这是脚本

 $(document).ready(    
        function () {

            $(".mytooltip").tooltip({
                animation: "true",
                placement: "right",
                title: "Tooltip texts....",
                trigger: "hover"
            });

Answer 1

我为你创造了一个jsfiddle ......

代码： -

$(document).ready(    
        function () {

            $("[title]").tooltip({
                animation: "true",
                placement: "right",

                trigger: "hover"
            });
        });

将鼠标悬停在文本框上，然后查看工具提示是否有效。您需要在要显示工具提示的标签上添加标题属性。

工作示例： - http://jsfiddle.net/dwxmjkb3/10/

我已经为你更新了jsfiddle，现在如果用户将悬停标签，输入或？然后它会显示tooltip.i刚刚将标题添加到主div。

请参阅工作示例： - http://jsfiddle.net/dwxmjkb3/11/

感谢

Answer 2

做这样的事情：

$(".mytooltip").hover(function () {  // on hover event you want the tooltip with the right value.

        var tooltipText = $(this).val(); // set the value you want dynamically

        $(".mytooltip").tooltip({
            animation: "true",
            placement: "right",
            title: tooltipText,  // initialize the value of the tooltip
            trigger: "hover"
        });
   });

如何使用标题动态的文本

2 个答案: