0
我將在下面包含我的腳本，我遇到了彈出窗口不顯示的問題。我在網上進行了研究，不確定我的代碼在哪裏出錯了。我試圖在所有的數據工具提示中包含一個彈出窗口。彈出窗口懸停時未顯示（工具提示）
這裏是代碼的提示
[data-tooltip],
[data-tooltip-uc],
[data-tooltip-ul],
[data-tooltip-ur],
[data-tooltip-lc],
[data-tooltip-ll],
[data-tooltip-lr] {
position: relative;
z-index: 2;
cursor: pointer;
}
[data-tooltip]:before {
bottom: 110%;
content: attr(data-tooltip);
}
[data-tooltip]:before,
[data-tooltip-uc]:before,
[data-tooltip-ul]:before,
[data-tooltip-ur]:before,
[data-tooltip-lc]:before,
[data-tooltip-ll]:before,
[data-tooltip-lr]:before {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
position: absolute;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
white-space: normal;
}
[data-tooltip]:after,
[data-tooltip-uc]:after {
bottom: 100%;
}
[data-tooltip]:after,
[data-tooltip-uc]:after,
[data-tooltip-ul]:after,
[data-tooltip-ur]:after,
[data-tooltip-lc]:after,
[data-tooltip-ll]:after,
[data-tooltip-lr]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
position: absolute;
left: 50%;
margin-left: 0px;
width: 0px;
border-top: 8px solid black;
border-top: 10px solid hsla(0, 0%, 20%, 0.9);
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: transparent;
content: " ";
font-size: 0;
line-height: 0;
}<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div id='map_container' style="margin-top: 100px; border: 0px solid red; text-align: center;">
<div id="xbuilder">
<table>
<caption><a href="javascript:window.open('https://watermonitor.gov/naww/wwhelps/index.php?hid=real_map_detail&print=1', 'yourWindowName', 'width=1000,height=1000');">Map</a> of real-time streamflow compared to historical streamflow for the day of year<br>
<span style="font-size: 0.50em;">(Choose a region and then click "GO" to view a regional map) <br><span style="color: red;">(Warning: It may take several minutes to process)</span></span>
</caption>
<tbody>
<tr>
<td>
<div>
États-Unis :
<span data-tooltip='Choose a US state'>
\t \t \t \t \t \t <select name='usst' id='usst' size='1' onchange='javascript:set_st(this);' >
\t \t \t \t \t \t \t <option value=''>États</option>
\t \t \t \t \t \t \t <option value='al'>Alabama</option>
\t \t \t \t \t \t \t <option value='ak'>Alaska</option>
\t \t \t \t \t \t \t <option value='az'>Arizona</option>
\t \t \t \t \t \t \t <option value='ar'>Arkansas</option>
\t \t \t \t \t \t \t <option value='ca'>Californie</option>
\t \t \t \t \t \t \t <option value='co'>Colorado</option>
\t \t \t \t \t \t \t <option value='ct'>Connecticut</option>
\t \t \t \t \t \t \t <option value='de'>Delaware</option>
\t \t \t \t \t \t \t <option value='dc'>District de Colombie</option>
\t \t \t \t \t \t \t <option value='fl'>Floride</option>
\t \t \t \t \t \t \t <option value='ga'>Géorgie</option>
\t \t \t \t \t \t \t <option value='hi'>Hawaï</option>
\t \t \t \t \t \t \t <option value='id'>Idaho</option>
\t \t \t \t \t \t \t <option value='il'>Illinois</option>
\t \t \t \t \t \t \t <option value='in'>Indiana</option>
\t \t \t \t \t \t \t <option value='ia'>Iowa</option>
\t \t \t \t \t \t \t <option value='ks'>Kansas</option>
\t \t \t \t \t \t \t <option value='ky'>Kentucky</option>
\t \t \t \t \t \t \t <option value='la'>Louisiane</option>
\t \t \t \t \t \t \t <option value='me'>Maine</option>
\t \t \t \t \t \t \t <option value='md'>Maryland</option>
\t \t \t \t \t \t \t <option value='ma'>Massachusetts</option>
\t \t \t \t \t \t \t <option value='mi'>Michigan</option>
\t \t \t \t \t \t \t <option value='mn'>Minnesota</option>
\t \t \t \t \t \t \t <option value='ms'>Mississippi</option>
\t \t \t \t \t \t \t <option value='mo'>Missouri</option>
\t \t \t \t \t \t \t <option value='mt'>Montana</option>
\t \t \t \t \t \t \t <option value='ne'>Nebraska</option>
\t \t \t \t \t \t \t <option value='nv'>Nevada</option>
\t \t \t \t \t \t \t <option value='nh'>New Hampshire</option>
\t \t \t \t \t \t \t <option value='nj'>New Jersey</option>
\t \t \t \t \t \t \t <option value='nm'>Nouveau-Mexique</option>
\t \t \t \t \t \t \t <option value='ny'>L'état de New York</option>
\t \t \t \t \t \t \t <option value='nc'>Caroline du Nord</option>
\t \t \t \t \t \t \t <option value='nd'>Dakota du Nord</option>
\t \t \t \t \t \t \t <option value='oh'>Ohio</option>
\t \t \t \t \t \t \t <option value='ok'>Oklahoma</option>
\t \t \t \t \t \t \t <option value='or'>Oregon</option>
\t \t \t \t \t \t \t <option value='pa'>Pennsylvanie</option>
\t \t \t \t \t \t \t <option value='ri'>Rhode Island</option>
\t \t \t \t \t \t \t <option value='sc'>Caroline du Sud</option>
\t \t \t \t \t \t \t <option value='sd'>Dakota du Sud</option>
\t \t \t \t \t \t \t <option value='tn'>Tennessee</option>
\t \t \t \t \t \t \t <option value='tx'>Texas</option>
\t \t \t \t \t \t \t <option value='ut'>Utah</option>
\t \t \t \t \t \t \t <option value='vt'>Vermont</option>
\t \t \t \t \t \t \t <option value='va'>Virginie</option>
\t \t \t \t \t \t \t <option value='wa'>L'état de Washington</option>
\t \t \t \t \t \t \t <option value='wv'>Virginie-Occidentale</option>
\t \t \t \t \t \t \t <option value='wi'>Wisconsin</option>
\t \t \t \t \t \t \t <option value='wy'>Wyoming</option>
\t \t \t \t \t \t \t <option value='pr'>Puerto Rico</option>
\t \t \t \t \t \t </select>
\t \t \t \t \t \t </span>
<span data-tooltip='Choose a US water resource region'>
\t \t \t \t \t \t <select name='ushuc' id='ushuc' size='1' onchange='javascript:set_st(this);' >
\t \t \t \t \t \t \t <option value=''>Région hydrologique</option>
\t \t \t \t \t \t \t <option value='01'>01 New England</option>
\t \t \t \t \t \t \t <option value='02'>02 Littoral de l'Atlantique</option>
\t \t \t \t \t \t \t <option value='03'>03 South Atlantic-Gulf</option>
\t \t \t \t \t \t \t <option value='04'>04 Grands Lacs</option>
\t \t \t \t \t \t \t <option value='05'>05 Ohio</option>
\t \t \t \t \t \t \t <option value='06'>06 Tennessee</option>
\t \t \t \t \t \t \t <option value='07'>07 Haut-Mississippi</option>
\t \t \t \t \t \t \t <option value='08'>08 Mississippi Inférieur</option>
\t \t \t \t \t \t \t <option value='09'>09 Souris-Rouge-Pluie</option>
\t \t \t \t \t \t \t <option value='10'>10 Missouri</option>
\t \t \t \t \t \t \t <option value='11'>11 Arkansas-Blanc-Rouge</option>
\t \t \t \t \t \t \t <option value='12'>12 Texas-Gulf</option>
\t \t \t \t \t \t \t <option value='13'>13 Rio Grande</option>
\t \t \t \t \t \t \t <option value='14'>14 Haut-Colorado</option>
\t \t \t \t \t \t \t <option value='15'>15 Colorado Inférieur</option>
\t \t \t \t \t \t \t <option value='16'>16 Grand Bassin</option>
\t \t \t \t \t \t \t <option value='17'>17 Pacifique Nord-Ouest</option>
\t \t \t \t \t \t \t <option value='18'>18 Californie</option>
\t \t \t \t \t \t \t <option value='19'>19 Alaska</option>
\t \t \t \t \t \t \t <option value='20'>20 Hawaï</option>
\t \t \t \t \t \t \t <option value='21'>21 Puerto Rico</option>
\t \t \t \t \t \t </select>
\t \t \t \t \t \t </span>
</div>
<button class="button" onClick="javascript:down_ch();"><span class="icon">Télécharger les données</span></button>
</td>
</tr>
<tr>
<td>
<div>
Canada :
<span data-tooltip='Choisissez une province canadienne'>
\t \t \t \t \t \t <select name='nus' id='nus' size='1' onchange='javascript:set_st(this);' >
\t \t \t \t \t \t \t <option value=''>Provinces</option>
\t \t \t \t \t \t \t <option value='zab'>Alberta</option>
\t \t \t \t \t \t \t <option value='zbc'>Colombie-Britannique</option>
\t \t \t \t \t \t \t <option value='zmb'>Manitoba</option>
\t \t \t \t \t \t \t <option value='znb'>Nouveau-Brunswick</option>
\t \t \t \t \t \t \t <option value='znl'>Terre-Neuve et Labrador</option>
\t \t \t \t \t \t \t <option value='zns'>Nouvelle-Écosse</option>
\t \t \t \t \t \t \t <option value='znt'>Territoires du Nord-Ouest</option>
\t \t \t \t \t \t \t <option value='znu'>Nunavut</option>
\t \t \t \t \t \t \t <option value='zon'>Ontario</option>
\t \t \t \t \t \t \t <option value='zpe'>Île-du-Prince-Édouard</option>
\t \t \t \t \t \t \t <option value='zqc'>Québec</option>
\t \t \t \t \t \t \t <option value='zsk'>Saskatchewan</option>
\t \t \t \t \t \t \t <option value='zyt'>Yukon</option>
\t \t \t \t \t \t </select>
\t \t \t \t \t \t </span>
<span data-tooltip='Choisissez un bassin versant canadien'>
\t \t \t \t \t \t <select name='nhuc' id='nhuc' size='1' onchange='set_st(this);' >
\t \t \t \t \t \t \t <option value=''>Bassins fluviaux canadiens</option>
\t \t \t \t \t \t \t <option value='z01'>01 Provinces Maritimes</option>
\t \t \t \t \t \t \t <option value='z02'>02 Saint-Laurent</option>
\t \t \t \t \t \t \t <option value='z03'>03 Nord du Québec et Labrador</option>
\t \t \t \t \t \t \t <option value='z04'>04 Sud-ouest de la baie d'Hudson</option>
\t \t \t \t \t \t \t <option value='z05'>05 Fleuve Nelson</option>
\t \t \t \t \t \t \t <option value='z06'>06 Ouest et Nord de la Baie d'Hudson</option>
\t \t \t \t \t \t \t <option value='z07'>07 Grand lac des Esclaves</option>
\t \t \t \t \t \t \t <option value='z08'>08 Pacifique</option>
\t \t \t \t \t \t \t <option value='z09'>09 Fleuve Yukon</option>
\t \t \t \t \t \t \t <option value='z10'>10 Arctique</option>
\t \t \t \t \t \t \t <option value='z11'>11 Fleuve Mississippi</option>
\t \t \t \t \t \t </select>
\t \t \t \t \t \t </span>
</div>
<div style='margin-left: 10px; float: right;' data-tooltip="Click to view a map of specified region."><input value="Restaurer la Carte" type="button" onclick="history.go(0)" /></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</header>
<body>
<div class="center">
<div id="my-div">
<iframe src="http://watermonitor.gov/naww/index.php?fr=1" id="my-iframe"></iframe>
</div>
</div>
<div class="legend">
<img name="legend" style="border: 0px" src="http://watermonitor.gov/naww/fr/images/map_legends/ptile_dot.gif" alt="map legend">
</div>
</body>