Twitterのブートストラップポップオーバーのサイズを変更するには？

Question

私はmvcプロジェクトでブートストラップを使用しています。私はブートストラップポップオーバーウィジェットに関する問題があります。私は可変テキストメッセージとし、可変サイズで任意の要素のポップオーバーを初期化したい

Check fiddle

ko.bindingHandlers.popover = { 
     init: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var options = ko.utils.unwrapObservable(valuesAccessor() || {}); 

      options.html = true; 

      options.content = '<small class="text-info">' + 'Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here. ' + '</small>'; 

      $(element).popover(options); 
     }, 
     update: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var extraOptions = allBindingsAccessor().popoverOptions; 

      $(element).popover(extraOptions.observable() ? "show" : "hide"); 
      $(element).siblings('.popover').css({ width: '150px' }); 

      //IF YOU UN-COMMENT BELOW 2 LINES THAN EVERY THINGS WORKS FINE 

      //if(extraOptions.observable()) 
       //$(element).popover('show'); 
     } 
    }; 

    function vm() { 
     var self = this; 

     self.isVisible = ko.observable(false); 

     self.open = function() { 
      self.isVisible(!self.isVisible()); 
     }; 
    } 

    ko.applyBindings(new vm()); 

：私はここで、コードをポップオーバーウィジェット用のカスタムバインディングノックアウトを作成しました。すべてのことが大丈夫だけど、最初の時よりもポップオーバーのデフォルトの幅を変更したときに、その位置が正しくないときは（フィドルの動作を確認してください）。

この問題よりもコメントを外してしまえば、フィドルにはいくつかのコード行があります。しかし、私はそれがハッキーなアプローチだと思っています、私はいくつかのより良い方法があればそれを処理したいですか？

Answer 1

ポップオーバーを初期化した後に幅を変更しています。 Popoverの計算された左上の位置はそのまま残りますが、幅は小さくなります。これにより、高さが大きくなります。

ポップオーバーが初期化される前に幅が適用されるようにイベントの順序を変更する必要があります。

Answer 2

DEMO

希望は、これは に役立つだけで

.popover { 
    max-width: 150px; 
    width: auto; 
} 

このCSSを追加し、私はあなたのコード

ko.bindingHandlers.popover = { 
     init: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var options = ko.utils.unwrapObservable(valuesAccessor() || {}); 



      options.html = true; 

      options.content = '<small class="text-info">' + 'Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here. ' + '</small>'; 

      $(element).popover(options); 


     }, 
     update: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var extraOptions = allBindingsAccessor().popoverOptions; 

      $(element).popover(extraOptions.observable() ? "show" : "hide"); 


      //IF YOU UN-COMMENT BELOW 2 LINES THAN EVERY THINGS WORKS FINE 

      //if(extraOptions.observable()) 
       //$(element).popover('show'); 
     } 
    }; 

    function vm() { 
     var self = this; 

     self.isVisible = ko.observable(false); 

     self.open = function() { 
      self.isVisible(!self.isVisible()); 
     }; 
    } 

    ko.applyBindings(new vm()); 

を編集し、これを試してみてくださいここで、sはだあなた

Answer 3

ありがとうございました私が使用する十分な初期化。

$(".property-price") 
    .popover({ 
      trigger: "hover", 
      placement: 'bottom', 
      toggle : "popover", 
      content : "The from price is calculated ba....the dates selected.", 
      title: "How is the from price calculated?", 
      container: 'body', 
      template: '<div class="popover popover-medium"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>', 
     }); 

ご覧のとおり、カスタムテンプレートが使用されています。テンプレートはカスタムのpopover-mediumクラスを使用します。

私は、あなたが望んだ場合にも、単にテンプレートクラスにスタイルを設定することができCSSセレクタ

.popover-medium { 
    max-width: 350px; 
} 

を持っています。