web-dev-qa-db-ja.com

Bootstrapツールチップのフォントを変更する方法

Bootstrap.jsに組み込まれているツールチッププラグインを使用して、ツールチップ内のテキストが書き込まれるフォントを変更するにはどうすればよいですか？どんなに一生懸命やっても、*セレクターで定義されたテキストを変更するだけで成功しました。私のbootstrapはこれを使用してjQueryでアクティブ化されます：$(".myTooltip").tooltip({html: "true", placement: "auto-right", delay: {"show": 300, "hide": 100}});
ツールチップはこの画像の横に表示されています：
<img title="<ul class='text-left'><li>Some text</li><li><em>More Text</em></li><li>Cost</li></ul>" class="myTooltip" src="image.png" />

javascripttwitter-bootstraptooltip
6
LegendaryB3ast

ブートストラップは、.tooltipの.tooltip-innerの2つのクラスを介してツールチップを装飾します。 bootstrap.cssのフラグメントは次のとおりです。

.tooltip {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  Word-break: normal;
  Word-spacing: normal;
  Word-wrap: normal;
  white-space: normal;
  /* ... */
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 4px;
}

したがって、ツールチップを自分で設定できます。

jQuery(document).ready(function($) {
  $(".my-tooltip").tooltip({
    html: "true", 
    placement: "auto-right", 
    delay: {"show": 300, "hide": 100}
  });
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body {
  padding: 20px;
}
.tooltip {
  font-family: Georgia;
  font-size: 20px;
}
.tooltip .tooltip-inner {
  background-color: #ffc;
  color: #c00;
  min-width: 250px;
}
<img title="<ul class='text-left'><li>Some text</li><li><em>More Text</em></li><li>Cost</li></ul>" class="my-tooltip" src="https://i.stack.imgur.com/ssdlq.jpg" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
12
Gleb Kemarsky