オンラインで実行画像を背景画像に使用する応用編もありますが、まずは title 属性 で試した後、contents オプションでバルーンをカスタマイズする方法から入るといいと思います。 ※ サンプルの contents には、Google Chrome で動作する HTML5 のコンテンツ( カレンダー )を使用しています jquery.balloon.js ダウンロードページ 設置サンプルコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://winofsql.jp/js/jquery.balloon112.js"></script>
<script>
$(function(){
$('#target1').balloon({
// 吹き出しを右に出すと画面の邪魔にならない場合が多いです
position: "right",
// 吹き出し端に付く正三角形のサイズ（高さ）
tipSize: 20,
// 吹き出しの CSS 設定です
css: {
"color": "#0000ff",
"font-size": "20px",
"font-weight": "bold",
"border": "solid 2px #111",
"padding": "20px",
"background-color": "#eee",
"opacity": 1,
}
});
$('#target2').balloon({
// 吹き出しを右に出すと画面の邪魔にならない場合が多いです
position: "right",
// 吹き出し端に付く正三角形のサイズ（高さ）
tipSize: 20,
// 吹き出しの CSS 設定です
css: {
"height": "270px",
"opacity": "1",
"color": "#000",
"font-size": "16px",
"border-radius": "10px",
"border": "solid 2px #A63814",
"padding": "10px",
"background-color": "#eee",
"opacity": 1,
},
// CSS の対象となる、吹き出しの内部コンテンツを定義します
"html": true,
"contents": '<img src="https://winofsql.jp/image/sab.gif"> ここには HTML を記述できます<br>▼ Google Chrome だと日付コントロール<br><input type="date">'
});
});
</script>
<pre>
▼ HTML の title 属性内を使用するシンプルなバルーン
<span
style='display:inline-block;border: solid 1px #ccc;padding: 20px;background-color:#333;color:#fff'
id="target1"
title="日本語表示あいうえお"
>この要素内の title 属性を使う</span>
▼ プラグイン側で、HTML の コンテンツを文字列を作成する応用編
<span
style='display:inline-block;border: solid 1px #ccc;padding: 20px;background-color:#333;color:#fff'
id="target2"
>contents オプションで HTML をバルーン内に表示</span>
</pre>
▼ HTML の title 属性内を使用するシンプルなバルーン この要素内の title 属性を使う ▼ プラグイン側で、HTML の コンテンツを文字列を作成する応用編 contents オプションで HTML をバルーン内に表示 関連する記事
jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する
|
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
- jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直..
