javascriptのみを使用してIDにホバーツールチップを追加する
m_schou
レガシーアプリケーションのhtml構造を変更したくありません。いくつかのIDのツールチップを追加するには、JavaScriptを上に追加するだけです。
いくつかのライブラリは、特定のHTML構造に依存するオプション、またはレガシーアプリケーションでは困難な完全なツールチップライブラリの統合方法を示しています。
このようなものですが、HTMLを追加していません。IDを見つけて、単純な黒い背景のツールチップに必要なものを適用するだけです。StackOverflowレピュテーションページのツールチップのように。
window.addEventListener("load", function () {
var couponcodes = document.getElementsByClassName("couponcode");
for (var i = 0; i < couponcodes.length; i++) {
couponcodes[i].addEventListener("mouseover", function () {
var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
coupontooltip.removeAttribute("style");
});
couponcodes[i].addEventListener("mouseout", function () {
var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
coupontooltip.style.display = "none";
});
}
});
http://jsfiddle.net/mynetx/5qbP3/
JS / jQueryのみでIDのツールチップを追加するにはどうすればよいですか？
シヴェンドラシン
html構造を変更せずに、JS / jQueryを使用してIDのツールチップを追加します。
jQuery(function($){
//On hover on id create tooltip element and append to that div
$('#add_tooltip').hover(
function () {
$(this).append('<div class = "coupontooltip">Lorem Ipsum is simply dummy text of the printing</div>');
//display the tooltip with animation.
$(this).find('.coupontooltip').hide().fadeIn('slow');
/*if in code already tooltip section is there
$(this).find('.coupontooltip').show();
*/
},
//On hover out remove the tooltip.
function () {
$(this).find('.coupontooltip').remove();
/*if in code already tooltip section is there
$(this).find('.coupontooltip').hide();
*/
}
);
})#add_tooltip{
cursor: pointer;
}
.coupontooltip{
display: inherit;
background: black;
width: 19px;
/* background: #C8C8C8; */
margin-left: 83px;
padding: 10px;
position: absolute;
z-index: 1000;
width: 200px;
height: 59px;
color: #fff;
top: 12px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div id="add_tooltip">Add Tooltip</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
cssを使用して画像にツールチップホバーを追加する
- 2
htmlとcssのみを使用して、SVG要素のホバーツールチップを作成する
- 3
BootstrapVueを使用してホバーしてツールチップを開くのを無効にする方法
- 4
BootstrapTooltipを使用してホバーでjQueryUIスライダーにツールチップを追加する際の問題
- 5
VBAを使用してExcelのComboBoxにツールチップを追加する
- 6
d3-tip.jsを使用してホバー時にツールチップを表示する
- 7
ツールチップが表示されている場合にのみ、ホバー効果のある要素を表示したままにする
- 8
マーカーとホバーツールチップを使用してsvgマップを作成する方法
- 9
nvd3ツールチップを使用してツールチップに「矢印」を追加する方法
- 10
動的に生成される特定のホバリングdivに対してのみツールチップを表示する方法
- 11
HTMLをトラバースしてツールチップを追加するjQueryの最良の方法-動的に
- 12
AngularJs：ng-optionsを使用してドロップダウンの単一の値にマウスホバーする際のツールチップ
- 13
WPF-DisplayMemberBindingを使用してGridViewColumnにツールチップを追加する
- 14
SwiftUIを使用してmacOS10.15にツールチップを追加する方法
- 15
Javascriptのホバー/ツールチップテキストを変更する
- 16
ラベルのホバーにツールチップを表示しますか？
- 17
jquery.uiツールチップ：一定時間ホバーした後にのみツールチップを表示します
- 18
JavaScriptを使用してツールチップを表示する
- 19
GWTとGXT3を使用してホバーツールチップを作成する方法
- 20
境界線のみのツールチップ矢印を追加します背景色はcssを使用して透明にする必要があります
- 21
イメージマップ-ホバー時にツールチップを表示する方法とマウスが停止したときのみ
- 22
bokehpythonを使用して2番目のY軸にホバーツールを追加する
- 23
ポイント/ホバーツールチップに追加情報を追加する方法
- 24
グリッド列のフィルターにツールチップ/ホバーオーバーを追加する方法 Extjs
- 25
imagemagickを使用して画像のグループをバッチ追加する
- 26
カットムトグルスイッチのホバーにツールチップを表示する
- 27
純粋なJavaScriptを使用してこのツールチップをこのようにする方法
- 28
ボケウェッジチャートにホバーツールチップを正しく表示する
- 29
列名を短くし、フルネームのホバーにツールチップを提供します
コメントを追加