2 - ol3.1ex 50b - Custom tooltips 2

「(button-title.js（250-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「250-ol3ex.js」

var map = new ol.Map({
 layers: [

  new ol.layer.Tile({
  /** ol.layer.Tile 
   * For layer sources that provide pre-rendered, tiled 
   * images in grids that are organized by zoom levels for 
   * specific resolutions. 
   * プリレンダリング（事前描画）を提供するレイヤソースのための、
   * 特定の解像度でのズームレベルによって編成されているグリッドの
   * タイルイメージ。（ol3 API）
   */

   source: new ol.source.OSM()
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
    */
  })
 ],

 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します

 target: 'map',
 view: new ol.View({
  center: [-8730000, 5930000],

  rotation: Math.PI / 5,
  /** Math.PI
   * 円周率。約 3.14159 です。
   * （MDN[https://developer.mozilla.org/ja/docs/Web
   * /JavaScript/Reference/Global_Objects/Math/PI]）
   */
  zoom: 8
 })
});

$('.ol-zoom-in, .ol-zoom-out').tooltip({
/** Tooltips tooltip.js
 * Inspired by the excellent jQuery.tipsy plugin written 
 * by Jason Frame; Tooltips are an updated version, 
 * which don't rely on images, use CSS3 for animations, 
 * and data-attributes for local title storage.
 * Jason Frame によって書かれた優れたjQuery.tipsyプラグイン
 * に触発されました。Tooltips は、更新されたバージョンで、画像
 * に依存しない、アニメーションに CSS3 を使用し、ローカルタイト
 * ル·ストレージのためのデータの属性です。
 * （Bootstrap[http://getbootstrap.com/javascript/
 * #tooltips]）
 * 
 * カーソルを何かの項目に合わせたとき、その項目に覆いかぶさるよう
 * な形で小さな枠が出現し、その枠内には選択された項目に関する補足
 * 情報が表示される。
 * （ツールチップ[http://ja.wikipedia.org/wiki/
 * %E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97]）
 */

 placement: 'right'
 /** placement
  * How to position the tooltip - top | bottom | left | 
  * right | auto.
  * ツールチップの配置方法 - top | bottom | left | right | auto
  * （Bootstrap[http://getbootstrap.com/javascript/
  * #tooltips]）
   */

});

$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
 placement: 'left'
});

「JavaScript Bootstrap（http://getbootstrap.com/javascript/）」の「Tooltips tooltip.js」に次のようにあります。

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
ジェイソンフレームによって書かれた優れた jQuery.tipsy プラグインからインスピレーションを受けています。ツールチップは更新されたバージョンで、画像に依存せずに、アニメーションにCSS3を、および、ローカルタイトル·ストレージのデータ属性を使用しています。

Tooltips with zero-length titles are never displayed.
長さゼロのタイトルのツールチップが表示されることはありません。

$('#example').tooltip(options)
「Options」
Name: placement
Type: string|function
Default: 'top'
Description:
How to position the tooltip - top | bottom | left | right | auto.

When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
"オート"を指定した場合、動的に tooltip を再配向します。placement が「auto left」の場合、tooltip は可能なら左に表示され、それ以外の場合は右に表示されます。

When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance.
関数が placement を決定するために使用される場合には、その最初の引数として tooltip のDOMノードと、その第二引数としてトリガー要素のDOMノードとに呼びだされます。このコンテキストは、 tooltip インスタンスに設定されています。


「v3.1.1/ol/ol/control/zoomcontrol.js」の一部を抜粋します。
---

ol.control.Zoom = function(opt_options) {
 var options = goog.isDef(opt_options) ? opt_options : {};
 var className = goog.isDef(options.className) ? options.className : 'ol-zoom';
 var delta = goog.isDef(options.delta) ? options.delta : 1;

 var zoomInLabel = goog.isDef(options.zoomInLabel) ?
  options.zoomInLabel : '+';
 var zoomOutLabel = goog.isDef(options.zoomOutLabel) ?
  options.zoomOutLabel : '\u2212';

 var zoomInTipLabel = goog.isDef(options.zoomInTipLabel) ?
  options.zoomInTipLabel : 'Zoom in';
 var zoomOutTipLabel = goog.isDef(options.zoomOutTipLabel) ?
  options.zoomOutTipLabel : 'Zoom out';

 var inElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
  'class': className + '-in',
  'type' : 'button',
  'title': zoomInTipLabel
 }, zoomInLabel);

---

 var outElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
  'class': className + '-out',
  'type' : 'button',
  'title': zoomOutTipLabel
 }, zoomOutLabel);

---