2017-04-18 45 views
0

私のスクリプトは以下のとおりですが、ポップアップが表示されない問題があります。私はオンラインで研究しており、私のコードのどこが間違っていたのか分かりません。私はどこにでもポップアップを入れようとしています。それはデータツールチップです。あなたはポップアップが表示されないときに表示される(ツールチップ)

visibility: hidden; 
opacity: 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>

答えて

0

そのためのコードです。

ツールチップを表示するには、擬似クラス:hoverを使用する必要があります。

[data-whatever]:hover:before, 
[data-whatever]:hover:after { 
    visibility: visible; 
    opacity: 1; 
} 

明らかに、「whatever」を実際のセレクタに置き換えます。

機能例hereが表示されます。

関連する問題