Question

我正在尝试根据点击时打开或关闭（切换）工具提示。

HTML是从javascript动态生成的，但这里是我想要点击时提供工具提示的其中一个元素的示例：

<label class="passiveText smallText" title="Name: Smith, John , Occupation Code: BA81, Occupation 
Description: BUSINESS SYSTEMS M" rel="tooltip" style="margin-top:10px; width:80%; text-decoration:underline; 
color:#009245;" containeridx="0" id="lblBadge_7022_0">7022</label>

在页面显示我试图添加以下代码，以便点击

    $(document).on("pageshow", "#DailyFrm", function () {
        $('[id*="lblBadge"]').on('click', function (e) {
            $(this).tooltip('open');
        });
    }

这甚至没有让工具提示首先打开。我做错了什么？

Answer 1

被修改

html的工具提示（jsfiddle）的无样式实现：

$('[id*="lblBadge"]').on('click', function (e) {
    var $this = $(this);
    var $tooltip = $this.children('.tooltip');

    if ($tooltip.length > 0) {
        $tooltip.remove();

        return true;
    } 

    $tooltip = $('<div>');
    $tooltip.addClass('tooltip');
    $tooltip.text( $this.attr('title') );

    $this.append($tooltip);
});

风格：

label { // choose appropriate selector
    position: relative; // required for positioning
    overflow: visible; // required for guaranteed tooltip visibility
}

.tooltip {
    position: absolute; // required for positioning

    // Relative to the parent label
    top: 35px;
    left: 20px;

    // Not necessary but recommended for the good look
    width: 250px;

    // optional
    background: lightgray;
    color: black;
}

我建议使用Osvaldas Valutis提供的漂亮解决方案：http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

从移动设备上查看live demo。

从动态HTML单击工具提示切换

1 个答案:

html的工具提示（jsfiddle）的无样式实现：