如何使用标题动态中的文本

Posted 2023-03-06

【中文标题】如何使用标题动态中的文本

【英文标题】：how to use text from title dynamic

【发布时间】：2014-10-03 08:18:26

【问题描述】：

我正在使用我在 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"
            );

【参考方案1】：

做这样的事情：

$(".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"
        );
   );

【讨论】：

谢谢，我应该如何将值放在 span 中？

通过这个：title: tooltipText - 请参阅我的回答

【参考方案2】：

我已经为你创建了一个 jsfiddle...

代码：-

$(document).ready(    
        function () 

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

                trigger: "hover"
            );
        );

将鼠标悬停在文本框上并查看工具提示是否正常工作。您需要将属性 title 添加到要在其上显示工具提示的标签。

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

我已经为你更新了 jsfiddle，现在如果用户将鼠标悬停在标签上，输入或？然后它将显示工具提示。我只是将标题添加到主 div。

查看工作示例：-http://jsfiddle.net/dwxmjkb3/11/

谢谢

【讨论】：

谢谢，但现在当我将鼠标悬停在文本框上时，我看到了工具提示，我希望当我悬停问号时，工具提示也能工作...

看到我已经更新了答案，如果对你有帮助，请接受:)