JQuery Sparklines и Twitter Bootstrap 3 - переопределяет стиль подсказки?

Вот так: я пытаюсь использовать jQuery Sparklines с Twitter Bootstrap 3. В этом процессе всплывающая подсказка Sparklines расплывчато стилизуется, и очевидно, что Bootstrap css переопределяет что-то в Sparklines JS.

Насколько я могу разобраться, это связано с селектором tooltip.

Вот один пример того, как он должен выглядеть. Это без Bootstrap css. Наведите указатель на различные искровые линии и посмотрите на полезную подсказку со значениями, зависящими: JSfiddle, как это должно выглядеть

Здесь, к сожалению, это то, что происходит, когда я добавляю Bootstrap css: JSfiddle, как выглядит с помощью Bootstrap css.

Я уверен, что это довольно просто, но поскольку Css по умолчанию для Sparklines жестко закодирован в js, я выхожу в море.

Любые указатели будут очень благодарны.

Ответ 1

Я обнаружил, что следующее работает лучше, чтобы встретить бутстрап css

.jqstooltip {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

Ответ 2

Я обнаружил, что это лучше всего подходит для изменения размера на основе контента.

.jqstooltip {
  width: auto !important;
  height: auto !important;
}

Ответ 3

Ну! Кажется, я решил это. Не идеально, но достаточно хорошо: для дальнейших ссылок для других: в Sparkline js: добавлено в строку 354:

'padding: 5px 5px 15px 5px;' +
'min-height: 30px;' +
'min-width: 30px;' +

. и изменил строку 871:

this.width = this.sizetip.width() + 1;

в

this.width = this.sizetip.width() + 12;

Не идеально, но он работает.

Ответ 4

У меня была такая же проблема, вы можете использовать этот css

  .jqstooltip{ 
       width:50px;
       height:25px!important;
    }

Ответ 5

.jqstooltip {
  width: auto !important;
  height: auto !important;
}