ツールチップ実装プラグイン「WordPress Tooltip」

WordPress Tooltip」は、WordPressにツールチップを実装できるプラグインです。jQueryプラグイン「TipTip」を組み込んでいます。プラグインページの対応バージョンは古めですが、WordPressにロードしているjQueryライブラリのバージョンがTipTipに対応していれば動くようです。

実装方法

インストール・有効化すれば、あとはショートコードを使用して投稿に挿入できます。
ショートコードの書き方

[tooltip content="ツールチップの内容" url="リンクを付与する場合はURL"]
テキスト
[/tooltip]

オプション

/wp-content/plugins/wp-tooltip/js/wp-tooltip.js内でオプションを設定できます。
オプションはTipTipのページを参照して下さい。
デフォルトでは、keepAlive: trueとなっていますが、デモページではfalseにしました。これでカーソルがテキストから外れるとツールチップはフェイドアウトするようになります。

jQuery(function() {
    jQuery('.wp-tooltip').tipTip({
        keepAlive: false
    });
});
他プラグイン
Easy Tooltip
Simple Tooltips:title属性をツールチップ化、メニューのセレクタを指定し、ツールチップを表示してくれる。

WordPress Plugins » Tag: Tooltips - Recent Posts

An error occurred while parsing your RSS feed. Check that it's a valid XML file.
  • このエントリーをはてなブックマークに追加

関連記事

Twenty Twelve 投稿者情報を表示/非表示に

TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「

「タグクラウド」ウィジェット カスタマイズ

タグクラウドは、管理画面ではあまりカスタマイズできません。必要であれば、フィルターフックやプラグインを用いて表示設定や概観の変更を行うことができます。 目次 出力をカスタマイズ 各タグの

titleタグ(wp_title) カスタマイズ

SEO対策を行う際に、titleタグは重要な要素だと言われています。 「サイトのタイトル」、「キャッチフレーズ」(site_description)、「カテゴリー名」など色々と組み合わせてみることが

管理画面のCSSをカスタマイズ

管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな

Twenty Thirteen ナビゲーションメニューを固定

ナビゲーションメニューを固定にしてみました。下方にスクロールしても最上部に固定されるやつです。 スクリプト 以下のjsファイルを用意して下さい。 nav要素のidは、ソースもしくはheade

ブルー・オレンジ・ピンクと選べるテーマ「Bouquet」をカスタマイズ

プレビューはこちら ダウンロード 目次 ヘッダー画像の高さを変更 アイキャッチをアップロード h1タグがやたら多いので最適化 画像をレスポンシブ対応 フォント「Sorts Mill

新年早々やらかした

あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ

コメント欄停止・コメント削除

WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止

Twitterのツイートボタンの設置

Twitterのツイートボタンの設置はプラグインを使用しなくても容易に実装できるようです。 ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 Tweetボタンの設置コード 公式

「Google Analytics for WordPress」投稿URLにやたら長いパラメータがついてしまう

Google 検索結果をみていたら、Wordpressの投稿のURLが実際のものより異様に長くなっているので何かなと思って調査してみました。 このような感じで http://kwski.net/ca

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑