質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

10511閲覧

jQuery UI tooltip の表示位置がずれる問題について

matometaru

総合スコア43

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/04/18 16:16

以下のサイトのような横並びの要素に関してツールチップを適用したいのですが、高速で要素にmouseon,mouseleaveを繰り返すとツールチップが期待していない位置に表示されます。

このサイトでは期待通りの位置に表示されていますが、ローカルで試したところ位置ずれが起きます。
http://alphasis.info/2013/04/jquery-ui-tooltip-anchortext-balloon-position-under/

なぜでしょうか?
わかる方回答宜しくお願いします。

lang

1<html lang="en"> 2<head> 3<meta charset="utf-8"> 4<title>jQuery UI tooltip test</title> 5<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script> 6<script type="text/javascript" src="../js/jquery-ui.js"></script> 7<script type="text/javascript" src="../css/jquery-ui.css"></script> 8 9<style> 10<!-- 11#sample { 12 padding: 2em 5em; 13} 14.ui-tooltip, 15.arrow:after { 16 background: black; 17 border: 2px solid white; 18} 19.ui-tooltip { 20 width:300px; 21 padding: 10px 20px; 22 color: white; 23 border-radius: 20px; 24 font: bold 14px "Helvetica Neue", Sans-Serif; 25 text-transform: uppercase; 26 box-shadow: 0 0 7px black; 27} 28.arrow { 29 width: 70px; 30 height: 16px; 31 overflow: hidden; 32 position: absolute; 33 left: 50%; 34 margin-left: -35px; 35 bottom: -16px; 36} 37.arrow.top { 38 top: -16px; 39 bottom: auto; 40} 41.arrow.left { 42 left: 20%; 43} 44.arrow:after { 45 content: ""; 46 position: absolute; 47 left: 20px; 48 top: -20px; 49 width: 25px; 50 height: 25px; 51 box-shadow: 6px 5px 9px -9px black; 52 -webkit-transform: rotate(45deg); 53 -moz-transform: rotate(45deg); 54 -ms-transform: rotate(45deg); 55 -o-transform: rotate(45deg); 56 tranform: rotate(45deg); 57} 58.arrow.top:after { 59 bottom: -20px; 60 top: auto; 61} 62--> 63</style> 64 65</head> 66<body> 67 68<div id="sample"> 69 <a href="#" title="アンカーテキスト1のツールチップ">アンカーテキスト1</a>、 70 <a href="#" title="アンカーテキスト2のツールチップ">アンカーテキスト2</a>、 71 <a href="#" title="アンカーテキスト3のツールチップ">アンカーテキスト3</a> 72</div> 73 74 75<script> 76jQuery( function() { 77 jQuery( "#sample" ).tooltip( { 78 position: { 79 my: "center top", 80 at: "center bottom+10", 81 using: function( position, feedback ) { 82 jQuery( this ).css( position ); 83 jQuery( "<div>" ) 84 .addClass( "arrow" ) 85 .addClass( feedback.vertical ) 86 .addClass( feedback.horizontal ) 87 .appendTo( this ); 88 } 89 } 90 } ); 91} ); 92</script> 93 94</body> 95</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="../js/jquery-ui.js"></script> <script type="text/javascript" src="../css/jquery-ui.css"></script> ←ここ
<link rel="stylesheet" type="text/css" href="../css/jquery-ui.css" />

投稿2015/04/19 00:23

編集2015/04/19 02:03
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

matometaru

2015/04/19 15:56

てっきりjavascriptのほうだと思い込んでました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問