0

CSS でツールチップを作成し、各ボタンのアイコンのすぐ上に矢印を配置したいと考えています。jQuery Mobile を使用してみましたが、うまくいきませんでした。これを実現する最も簡単な方法は、ツール ヒントを手動で配置することです:(

また、別の解像度のモバイルアプリでこのページを使用したり、ページサイズを縮小したりする場合、ツールチップを手動で配置すると変更されるのではないかと思っていましたか?

.offset()各ボタンIDの相対的な領域の周りにツールチップクラスを取得するために使用しようとしたもの。

var CS_x_pos = $("#CS").offset();
var CS_y_pos = $("#CS").offset();

var GH_x_pos = $("#GH").offset();
var GH_y_pos = $("#GH").offset();

//CS
$(".tooltip").css({
    left: CS_x_pos, 
    top: CS_y_pos 
});


//GH
$(".tooltip").css({
    left: GH_x_pos, 
    top: GH_y_pos 
});

私がしようとすると：

var CS_x_pos = $("#CS").offset().left;
var CS_y_pos = $("#CS").offset().top;

私はこれを得る：

ここに画像の説明を入力

ツールの先端が下に来る理由がわかりません

ここに画像の説明を入力

これが私のjsfiddleです：

http://jsfiddle.net/liondancer/rKPfe/

ツールチップを相対的な領域の周りに配置すると思い.offset()ましたが、それでもかなり遠い=/

誰かが私を助けたり、これらのツール ヒントを手動で配置する方法を教えてくれませんか? とても有難い！

4

2 に答える 2

1

ツールチップ自体の高さと幅を考慮していないためです。

その高さと幅を計算し、これを上と左の値から差し引きます。

var width = parseFloat($(".tooltip").css('width'));
var height = parseFloat($(".tooltip").css('height'));

$(".tooltip").css({
    left: CS_x_pos - width, 
    top: CS_y_pos - height 
});
于 2013-10-09T18:25:04.520 に答える