2011-07-09 15 views
0

マーカーのホバーでJqueryのツールチップコードを実行しようとしましたが、位置を設定する際に問題があると思います。Mouseover Tooltip jQuery(tipsy)

は、ここに私のコード

 google.maps.event.addListener(marker, "mouseover", function() { 
    $('#example-1').tipsy(); 
     }); 

MOUSEOVERコード自体が動作するのですが、私はツールチップの位置を設定する必要があるかもしれないと思いますか?

プラグインはここで見つけることができます: http://onehackoranother.com/projects/jquery/tipsy/

答えて

1

ここでの問題は、要素は地図上にする必要があります。

Google Maps JavaScript APIのv3の例情報ウィンドウのカスタム

+0

私は理想的には、マウスオーバー時にインフォウインドウをロードしてマウス離して閉じることができます。その後、cssでツールチップのように表示されます。ありがとう、私はそれを試みます。 – pufAmuf

0

よりもむしろのためのツールチップを取得するために、余分なライブラリをインポートする:用のカスタム情報ウィンドウの例は、Googleでこの外観を行う方法を説明するため

地図の場合は、Google Maps JavaScript API v3の一部であるInfoWindowオブジェクトを使用するだけでよい場合があります。

Markerオブジェクトのデフォルトのツールチップ機能を使用すると、機能が豊富ではありませんが、さらに簡単なオプションがあります。マーカーのtitleプロパティを設定するだけで完了です。

marker.setTitle('rollover text!!!'); 

(あなたが本当にInfoWindowを使用して利用できませんほろ酔いでいくつかの機能が必要な場合、おそらくその機能は、質問および/またはコメントにあるものを含めることが良いでしょう。)

+0

ありがとうございます、私は現在、タイトルのプロパティを使用していますが、表示遅延時間とWindowsのツールチップのデフォルトの外観が気に入らないのです。私がやってみたいことはこれです:http://onehackoranother.com/projects/jquery/tipsy/ – pufAmuf

1

たぶん誰かがまだ解決策を必要としています。これは私がそれを解決する方法です。まず

、あなたのメーカーを追加すると

$(dom).on('hover', 'area', function() { 
    var $this = $(this), title = $this.attr('title'); 
    if (title) { 
     $this.removeAttr('title'); 

     // this is the best dom node I figured out to attach the tipsy (and trigger this very first time) 
     $this.parent().parent().attr('title', title).tipsy().tipsy("show"); 
    } 
}); 

マップ層に「領域」にホバーイベントのリスナーを定義し、最適化することなく、それを実行します。

new google.maps.Marker({ 
    map: map, 
    title: title, 
    position: location, 
    // make maps to create a DOM node for each marker 
    optimized: false 
}); 

ザッツすべてを!