弹出窗口时不会显示（工具提示）

时间：2017-04-18 14:35:54

标签： html css popup tooltip

我将在下面包含我的脚本，我遇到的问题是我的弹出窗口没有出现。我在网上研究过，不知道我的代码在哪里出错了。我试图在数据工具提示的任何地方都包含一个弹出窗口。

以下是工具提示的代码

[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'>
						  <select name='usst' id='usst' size='1' onchange='javascript:set_st(this);' >
							<option value=''>États</option>
							<option value='al'>Alabama</option>
							<option value='ak'>Alaska</option>
							<option value='az'>Arizona</option>
							<option value='ar'>Arkansas</option>
							<option value='ca'>Californie</option>
							<option value='co'>Colorado</option>
							<option value='ct'>Connecticut</option>
							<option value='de'>Delaware</option>
							<option value='dc'>District de Colombie</option>
							<option value='fl'>Floride</option>
							<option value='ga'>Géorgie</option>
							<option value='hi'>Hawaï</option>
							<option value='id'>Idaho</option>
							<option value='il'>Illinois</option>
							<option value='in'>Indiana</option>
							<option value='ia'>Iowa</option>
							<option value='ks'>Kansas</option>
							<option value='ky'>Kentucky</option>
							<option value='la'>Louisiane</option>
							<option value='me'>Maine</option>
							<option value='md'>Maryland</option>
							<option value='ma'>Massachusetts</option>
							<option value='mi'>Michigan</option>
							<option value='mn'>Minnesota</option>
							<option value='ms'>Mississippi</option>
							<option value='mo'>Missouri</option>
							<option value='mt'>Montana</option>
							<option value='ne'>Nebraska</option>
							<option value='nv'>Nevada</option>
							<option value='nh'>New Hampshire</option>
							<option value='nj'>New Jersey</option>
							<option value='nm'>Nouveau-Mexique</option>
							<option value='ny'>L'état de New York</option>
							<option value='nc'>Caroline du Nord</option>
							<option value='nd'>Dakota du Nord</option>
							<option value='oh'>Ohio</option>
							<option value='ok'>Oklahoma</option>
							<option value='or'>Oregon</option>
							<option value='pa'>Pennsylvanie</option>
							<option value='ri'>Rhode Island</option>
							<option value='sc'>Caroline du Sud</option>
							<option value='sd'>Dakota du Sud</option>
							<option value='tn'>Tennessee</option>
							<option value='tx'>Texas</option>
							<option value='ut'>Utah</option>
							<option value='vt'>Vermont</option>
							<option value='va'>Virginie</option>
							<option value='wa'>L'état de Washington</option>
							<option value='wv'>Virginie-Occidentale</option>
							<option value='wi'>Wisconsin</option>
							<option value='wy'>Wyoming</option>
							<option value='pr'>Puerto Rico</option>
						  </select>
						</span>
                <span data-tooltip='Choose a US water resource region'>
						  <select name='ushuc' id='ushuc' size='1' onchange='javascript:set_st(this);' >
							<option value=''>Région hydrologique</option>
							<option value='01'>01 New England</option>
							<option value='02'>02 Littoral de l'Atlantique</option>
							<option value='03'>03 South Atlantic-Gulf</option>
							<option value='04'>04 Grands Lacs</option>
							<option value='05'>05 Ohio</option>
							<option value='06'>06 Tennessee</option>
							<option value='07'>07 Haut-Mississippi</option>
							<option value='08'>08 Mississippi Inférieur</option>
							<option value='09'>09 Souris-Rouge-Pluie</option>
							<option value='10'>10 Missouri</option>
							<option value='11'>11 Arkansas-Blanc-Rouge</option>
							<option value='12'>12 Texas-Gulf</option>
							<option value='13'>13 Rio Grande</option>
							<option value='14'>14 Haut-Colorado</option>
							<option value='15'>15 Colorado Inférieur</option>
							<option value='16'>16 Grand Bassin</option>
							<option value='17'>17 Pacifique Nord-Ouest</option>
							<option value='18'>18 Californie</option>
							<option value='19'>19 Alaska</option>
							<option value='20'>20 Hawaï</option>
							<option value='21'>21 Puerto Rico</option>
						  </select>
						</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'>
						  <select name='nus' id='nus' size='1' onchange='javascript:set_st(this);' >
							<option value=''>Provinces</option>
							<option value='zab'>Alberta</option>
							<option value='zbc'>Colombie-Britannique</option>
							<option value='zmb'>Manitoba</option>
							<option value='znb'>Nouveau-Brunswick</option>
							<option value='znl'>Terre-Neuve et Labrador</option>
							<option value='zns'>Nouvelle-Écosse</option>
							<option value='znt'>Territoires du Nord-Ouest</option>
							<option value='znu'>Nunavut</option>
							<option value='zon'>Ontario</option>
							<option value='zpe'>Île-du-Prince-Édouard</option>
							<option value='zqc'>Québec</option>
							<option value='zsk'>Saskatchewan</option>
							<option value='zyt'>Yukon</option>
						  </select>
						</span>
                <span data-tooltip='Choisissez un bassin versant canadien'>
						  <select name='nhuc' id='nhuc' size='1' onchange='set_st(this);' >
							<option value=''>Bassins fluviaux canadiens</option>
							<option value='z01'>01 Provinces Maritimes</option>
							<option value='z02'>02 Saint-Laurent</option>
							<option value='z03'>03 Nord du Québec et Labrador</option>
							<option value='z04'>04 Sud-ouest de la baie d'Hudson</option>
							<option value='z05'>05 Fleuve Nelson</option>
							<option value='z06'>06 Ouest et Nord de la Baie d'Hudson</option>
							<option value='z07'>07 Grand lac des Esclaves</option>
							<option value='z08'>08 Pacifique</option>
							<option value='z09'>09 Fleuve Yukon</option>
							<option value='z10'>10 Arctique</option>
							<option value='z11'>11 Fleuve Mississippi</option>
						  </select>
						</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>

1 个答案:

答案 0 :(得分：0)

因为你用

隐藏了它 
visibility: hidden;
opacity: 0;

然后永远不要取消隐藏它。

您需要使用:hover伪类来显示工具提示。

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

显然，用实际的选择器替换“what”。

您可以看到正常运作的示例here。

相关问题
最新问题