jQueryツールチップ中のリンク表示方法とクリック可能な設定
- jQueryを使用してツールチップ内にリンクを表示し、クリック可能にする方法を教えてください。
- マウスオーバーすると表示されるツールチップ内のリンクをクリックする方法についてのアドバイスをお願いします。
- ツールチップ内のリンクをマウスオーバーしてクリックできるようにする方法について教えてください。
- ベストアンサー
jQuery ツールチップの中のリンク
ツールチップの中にリンクを置きたいと考えています。 以下HTMLとscriptご参照ください。 テキスト「hoge」をマウスオーバーすると、その下のp.tooltipが表示されるイメージです。 ですが、「hoge」からマウスが離れると、tooltipが消えてしまい、 中のリンクを触ることができません。 （当然ながら…なのですが） 何か良い方法で、ツールチップの中のリンクをクリックする方法はありますでしょうか？ tooltipにマウスがある時はmouseoutイベントが起動しない…みたいな。 そもそも無理なのでしょうか？ 詳しい方、ご教授いただけたら大変、助かります。 どうぞ宜しくお願いいたします。 ■HTML <p class="link">hoge</p> <p class="tooltip"> ダミーダミーダミー <a href="#test">testへ</a> </p> ■script $('p.tooltip').hide(); $('p.link').mouseover(function(){ $('+ p.tooltip',this).slideDown(); }).mouseout(function(){ $('+ p.tooltip',this).slideUp(); });
- mc0816
- お礼率94% (69/73)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どのような文脈やCSSで使う予定なのかが不明ですが、 自前でマウスの範囲をチェックして処理を変えるようにしても良いのでしょうけれど、それｒなりに面倒なので、tooltip部分をlinkの子要素になるようにしておいて、mouseenter、mouseleaveで制御するのが簡単ではないでしょうか。 下の例ではmouoseenterなどのかわりにhober()を利用しています。 マークアップを少し変えてありますが、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> span.tooltip{ display:block; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.tooltip').hide(); $('p.link').hover( function(){ $('.tooltip',this).slideDown(); }, function(){ $('.tooltip',this).slideUp(); }); }); </script> </head> <body> <p class="link">hoge <span class="tooltip"> ダミーダミーダミー <a href="#test">testへ</a> </span> </p> <p class="link">fuga <span class="tooltip"> ダミー2ダミー2ダミー2 <a href="#test2">test2へ</a> </span> </p> </body> </html>
関連するQ&A
- jQuery膨らむボタン。同一ウィンドウにリンク
http://jquery.malsup.com/hoverpulse/anchor.html ↑これを参考にjQueryでマウスを上にのせると膨らむボタンを作ったのですがクリックするとリンク先が別タブで開かれてしまいます。 同一のウィンドウ（HTMLでいうTARGET="_self"）でリンク先を表示させたいのですがどうしたらいいですか？ $(document).ready(function() { $('div.thumb img').hoverpulse().each(function() { var $img = $(this); var link = $img.attr('data-link'); $img.attr('title','Goto: ' + link); $img.click(function() { window.open(link); return false; }); }); }); <div id="thumbs"><div class="thumb"> <img src="img.jpg" data-link="http://google.com" /> </div></div>
- ベストアンサー
- JavaScript
- bootstrapのツールチップで改行できない
こんにちは。 xamppで、bootstrapのツールチップを表示させたいのですが、エラーが出てうまくいきません。 以下、コードです。 ---head部分--- <script type="text/javascript" src="js/bootstrap.min.js"></script> ---本体部分--- <button type="button" id="tooltip" data-html="true" data-toggle="tooltip" title="ここで改行<br><br>する！"> マウスオーバーしてみて！ </button> <script> $(function() { $('#tooltip').tooltip(); }); </script> ------------- コードは、http://blog.shuffleee.com/3302/からそのままコピーしたものです。 ツールチップ自体の表示はできるのですが、エラーが出るのと、改行ができず、 <br>がそのまま表示されます。 以下、エラーです。 -------------- Failed to load resource: the server responded with a status of 403 (Forbidden) yearCalendar.php:34TypeError: undefined is not a function(evaluating'$('#tooltip').tooltip()') -------------- 403エラーについて調べて、パーミッションを755に設定したのですが、それでもエラーがでます。 他のjsファイルは読み込めるので、サーバやapacheの設定ではないと思いますが...。 エラーと改行できないのと関係あるのかないのかもわからない状態です。 ご教授よろしくお願いします。
- 締切済み
- JavaScript
- jQuery 記述方法
今、webサイトを作っていてjQueryを使用しようとしています。 しかし、うまくできません。外部にjavascriptファイルを置いています。 やりたいことは、ナビゲーションのロールオーバーです。 javascriptは初心者なのでどこが間違っているまたは足りないのかわかりません。以下に必要だと思うものを記述しますので分かる方がおりましたら教えてください。 javascriptファイルとjquery-1.6.4.min.jsはhtmlと同フォルダ内にあります。またimgフォルダ内に画像と拡張子の前に_onを付けた画像を入れています。 HTML <head> <script type="text/javascript" src="./jquery-1.6.4.min.js"></script> <script type="text/javascript" src="park.js"></script> </head> <body> <p><a href="index.html"> <img alt="top" height="50" class="navi" src="img/top.gif" width="100" /></a></p> </body> javascript $(function(){ $ ("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)_on(￥.{a-z]+)$/,"$1$2")); }).each(function(){ $("<img>").attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }); ]); です。 よろしくお願いします。
- ベストアンサー
- JavaScript
- リンク前後で画像を変えたい
こんにちわ。 少し質問させていただきます。 タイトルそのままですが、 リンク前とリンク後で画像を変えたいのですが、 どうすればよろしいでしょうか？ 以前にこちらでロールオーバーの質問をした時に a1_off.pngをa1_on.pngに名前で変えるやり方を教えて 頂きました。（質問自体は少し違いますが・・・） 切り替える画像の種類が多いので同様にリンク後に a1_linkbefore.pngからa1_linkafter.png a2_linkbefore.pngからa2_linkafter.png のように名前で変えたいと考えたいのですが そのような事ができるのでしょうか？ できるのであれば、ご教授お願いしたいです。 ちなみにソースはこのような形です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <html lang="ja"> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { $('a.link').each ( function() { var imgObj = $(this).find('img'); var imgSrc = imgObj.attr('src'); $(this).mouseover ( function() { imgObj.attr ( 'src', imgSrc.replace ( /off.png/, 'on.png' ) ); }).mouseout ( function() { imgObj.attr ( 'src', imgSrc ); }) }); }); </script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p class="クラス１"> <a href="a1.html" class="クラスA-1"> <span class="クラスＡ-1">A1</span> <img src="a1.png" border="0"> </a></p> <p class="クラス2"> <a href="a2.html" class="クラスＡ-2"> <span class="クラスＡ-2">A2</span> <img src="a2.png" border="0"> </a></p> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryで画像にリンクを張りたい
HTMLページに <img src="1.jpg" width="50" height="50" id="tes"> というタグがあるのですが、 ページが読み込まれたときに、 そのタグにaタグをつけて <a href="hoge.html" target="_blank"><img src="1.jpg" width="50" height="50" id="tes"></a> とリンクを張りたいのですが以下のような スクリプトを書いてみたのですが、 できません。 <script type="text/javascript"> $(function(){ $('<img />').append($('<a />',{ href:"hoge.html", target:"_blank" }) ) }); </script> jQueryがよくわかっていないのでめちゃくちゃなのだと思いますが、 そもそもこのように画像にaタグをつけることは可能なのでしょうか。 jQueryのバージョンは1.2.6を使っていますが、 新しいバージョンでも構いません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryでポップアップの中にポップアップ
<html> <head></head> <style type="text/css"> .popup { position:absolute;bottom:0;left:0;width:300px;padding:1px 5px;border:solid 1px #000;background:#fff;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.b').live({ /* <= bind? */ mouseenter:function(){ var target = $( $(this).children().filter('.c').attr('href') ); $(this).css('position','relative'); $(this).append('<div class="popup">'+target.html()+'</div>'); }, mouseleave:function(){ $(this).css('position','static'); $(this).children().filter('div').remove(); } }); }); </script> <body> <div id="a1"><p>a1a1a1</p></div> <div id="a2"><p>a2a2<span class="b"><a href="#a1" class="c">#a1</a></span>a2</p></div> <div id="a3"><p>a3<span class="b"><a href="#a2" class="c">#a2</a></span>a3a3</p></div> </body> </html> このような感じで、#a2にマウスカーソルを合わせたらid="a2"の内容が吹き出しのような感じでポップアップし、 その中に含まれる#a1にマウスカーソルを合わせたらそこからさらにid="a1の内容がポップアップする仕組みを作りたいのですが、 ポップアップの上にマウスカーソルを合わせることができずに困っています。 参考：jQuery の hover() について調べたことのまとめ http://d.hatena.ne.jp/tilfin/20080615/1213608859 参考：.live()でhoverイベントに複数の関数をバインドできない http://jsdo.it/cancer6/mh9t 自分で調べてみて分かったことは ・hover(fn1,fn2)はfn1=mouseover,fn2=mouseoutではなくfn1=mouseenter,fn2=mouseleave ・後から追加した要素(ポップアップ)の中の要素にもhoverを有効にするにliveでhoverを設定する必要がある ・liveでhoverイベントを指定するときはmouseenter,mouseleaveの2つに分けて指定する必要がある 上記のコードを保存して見ていただけると分かると思うのですが、 liveにするとポップアップの上にカーソルを合わせることができず、 bindにするとポップアップの上にカーソルを合わせることができます。 ポップアップはclass="b"の子要素となるようにしているので、 ポップアップにマウスカーソルが合わさっている状態＝class="b"からmouseleaveしてない状態となっていると思うのですが…。 どのようにすれば「後から追加された要素(ポップアップ)」内にもhoverイベントを適用させつつ、 「後から追加された要素(ポップアップ)」内にマウスカーソルを乗せられる状態にできますか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- jQueryで親カテゴリーが違う場合値を変えたい
http://osvaldas.info/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly こちらのソースをいじってます。 [rel~=tooltip]に当てはまる要素で現在選択してる物の親要素が.webなら～と条件分岐したいのですが、実行しても、[rel~=tooltip]が含まれる要素の中に.webがあるならみたいなニュアンスになってるようです。どうやればここに条件分岐できるのでしょうか？ HTML↓ <html> <head>~</head> <body> <div class="web"><a href="" rel="tooltip">abc</a></div> <div class="none"><a href="" rel="tooltip">abc</a></div> </body> </html> jQuery↓ $( document ).ready( function() { var targets = $( '[rel~=tooltip]' ), target = false, tooltip = false, title = false; targets.bind( 'mouseenter', function() { target = $( this ); tip = target.attr( 'title' ); if(target.parent('.web')) { tooltip = $( '<div id="tooltip" class="web"></div>' ); }; if(target.parent('.none')) { tooltip = $( '<div id="tooltip" class="none"></div>' ); }; if( !tip || tip == '' ) return false; target.removeAttr( 'title' ); tooltip.css( 'opacity', 0 ) .html( tip ) .appendTo( 'body' ); }
- ベストアンサー
- JavaScript
- jqueryでajaxsuccessの内側this
いつもお世話になっております jqueyで質問なのですが、ajaxの成功したときに起動する successの内側で$(this).val()を呼び出し、CSSにアクセスしたいのですが 期待した動作にはなりません。 期待する動作 それぞれクリックすると「１」「２」「３」と出て背景が赤くなる。 実際の動作 エラー「e.nodeName is undefined」となります。 どなたか、successの内側から$(this)にアクセスする方法をご存知の方いらっしゃいませんでしょうか 他の方法で期待の結果になるようにではなく、successの内側から$(this)にアクセスする方法が知りたいです お忙しい中恐縮ですが、分かる方がいたら嬉しいです <input class="hoge" value="1" /> <input class="hoge" value="2" /> <input class="hoge" value="3" /> <script type="text/javascript"> $(document).ready(function() { $('.hoge').click(function(){ $.ajax({ url: "some.html", cache: false, success: function(){ alert( $(this).val() ); $(this).css('background-color','red'); } }); }); }); </script>
- ベストアンサー
- JavaScript
- 隠しリンクを…
こんにちは。 隠しリンクを以下のスクリプトで貼ろうと思うのですが、リンク先のページを別のフレームに開きたいのです。 <script language="JAVAScript"> <!-- function link(){ location="index.htm"; } //--> </script> 隠し<span onclick="link()">リ</span>ンク どこに、何を加えればいいのでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- ふきだし型のツールチップがIEだと
こちらのサイトの http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_tooltip Side Navigation Tooltip / Popup Bubble を使用しているのですが、 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_tooltip/sidenavigation_tooltip.inc&ttl=Side+Navigation+Tooltip+%2F+Popup+Bubble%E3%81%AE%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB ふきだしに入れている内容が多いため、縦の長さがナビより長い状態です。 一度マウスオンしてふきだしを出した後、マウスをはなすと本来なら ふきだしが隠れるのですが、文字だけが見えた状態になります。 safariやfirefox、クロムではちゃんと隠れますが、IEだけは触れた後も ナビの下から文字が見えた状態になってしまいます。 IEのバグ？というかIEには対応していないのでしょうか。 どうかご回答お願い致します。 また、探したのですがもし似たようなツールチップがございましたら 教えて頂けると助かります。 どうぞ宜しく御願い致します。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 tooltip部分をlinkの子要素すれば、すごくシンプルにできるんですね。驚きです。 hover()というのを使えば、 要素内にある他の要素上にマウスカーソルが入った場合にも、 マウスはoutにならず、overのままでいてくれるなんて。 勉強になりました。 スクリプトも書いていただき、分かりやすい解説でご親切に教えていただいたことを 大変感謝します。 自分でも実装し、期待通りにできました！ 本当にありがとうございました。