1

フィールドにフォーカスがあるときにポップオーバーを表示する複数のフォーム入力フィールドとテキスト フィールドがあります。一部のポップオーバーのコンテンツは長くなる可能性があるため、input タグ内でコンテンツを宣言したくありません。代わりに、次のものがあります。

<div class="form-group">
    <label for="name">Name</label>

    <input type="text" class="form-control js-tooltip-trigger" id="name" maxlength="50" >  

    <div class="js-tooltip" style="display: none;">
        <p><strong>Your name.</strong></p>
        <p>Enter your full name. This will be used ...</p>
    </div>
</div>

<div class="form-group">
    <label for="ref">Reference</label>

    <input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50" >  

    <div class="js-tooltip" style="display: none;">
        <p><strong>Your reference is optional.</strong></p>
        <p>Enter a code of your choice for reference purposes.</p>
   </div>
</div>

私は次のJavaScriptを持っています

$(function () {
   $('.js-tooltip-trigger').popover({
       html: true,
       trigger: 'focus',
       content: function () {
           return $(correct tool tip).html();
       }
   });
});

上記のJavaScriptで正しいポップオーバーを表示または返すにはどうすればよいですか。ツールチップのコンテンツにデータ属性を追加して、各入力フィールドにリンクする<div class="js-tooltip" style="display:none;" data-tooltip="name">など、jquery を使用してそれを見つけて返すとどうなるでしょうか。jqueryでこれをどのように行いますか？誰もがよりエレガントなソリューションを持っていますか?

また、ウィンドウのサイズ変更時にポップオーバーを入力フィールドと自動位置に残すにはどうすればよいですか。現在、ウィンドウのサイズを変更すると浮き上がります。

上記のhtmlを使用して、自分でそれを理解することができます:

$(function () {
   $('.js-tooltip-trigger').popover({
       html: true,
       trigger: 'focus',
       content: function (e) {
           return $(this).parent(".form-group").find(".js-tooltip").html();
       }
   });
});

よりエレガントなソリューションを考えられる人はいますか?

4

2 に答える 2

1

あなたはこのようにすることができます...これがDEMOです

Jquery部分

 $(function(){

    // Enabling Popover Example 1 - HTML (content and title from html tags of element)
    $("[data-toggle=popover]").popover();

    // Enabling Popover Example 2 - JS (hidden content and title capturing)
    $(".form-control").popover({
        html : true, 
        content: function() {
          return $('.js-tooltip').html();
        },
        title: function() {
          return $('.js-tooltip').html();
        }
    });


});

HTML 部分 

<div class="form-group">
    <label for="name">Name</label>

    <input type="text" class="form-control js-popover-trigger" id="name" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your name" >  

    <div class="js-tooltip" style="display: none;" id="n1">
        <p><strong>Your name.</strong></p>
        <p>Enter your full name. This will be used ...</p>
    </div>
</div>

<div class="form-group">
    <label for="ref">Reference</label>

    <input type="text" class="form-control js-popover-trigger" id="ref" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your reference is optional">  

    <div class="js-tooltip" style="display: none;" id="t2">
        <p><strong>Your reference is optional.</strong></p>
        <p>Enter a code of your choice for reference purposes.</p>
   </div>
</div>
于 2015-05-28T11:27:27.830 に答える
0

私はこれがどのように機能するかのファンではありませんが、基本的には、 popover が必要な位置にとどまる要素を作成し、それに popover を追加する必要があります。この場合、ツールチップ html 用に既に配置されているコンテナーを使用しました。コンテナー ID を動的に作成しているので、html でそれを行うことを心配する必要はありません。

したがって、この HTML の場合:

<div class="form-group pos-relative">
    <label for="ref">Reference</label>
    <input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50">
    <span class="js-tooltip" style="display: none;">
        <p><strong>Your reference is optional.</strong></p>
        <p>Enter a code of your choice for reference purposes.</p>
    </span>
</div>

この CSS:

.pos-relative{
  position:relative;
}
.js-tooltip{
   position:absolute; 
   top:0;
   right:0;
}

そして、この JS は、次の場所で実行されます。

$(function () {

  $('.js-tooltip-trigger').each(function(ind, ele){

    var $ele = $(ele),
        $ttSpan = $ele.next('.js-tooltip'),
        ttHtml = $ttSpan.html(),
        rndID = 'ttid'+ String(Math.random()).substr(2);

    // set the ID, strip the style, and empty the html--
    // we already have it stored in the var above
    $ttSpan.attr('id', rndID).removeAttr('style').html('');

    // make the popovers
    $ele.popover({
        html: true,
        trigger: 'focus',
        placement: 'right',
        container: '#'+rndID, 
        content: ttHtml
    });

  });

});

実際の動作はこちら

于 2015-05-28T16:09:23.527 に答える