Всплывающая подсказка - PullRequest
Новая
       35

Всплывающая подсказка

1 голос
/ 05 марта 2019

Я гитарист, а не кодер, но у меня есть сайт урока игры на гитаре, который я пытаюсь обновить.(Извините, если я напортачу о размещении кода ниже.) У меня проблема с позиционированием всплывающей подсказки, которая использует HTML и CSS.Интересно, кто-нибудь может помочь.Если вы перевернете его на этой странице, вы увидите, что я хочу, чтобы он делал.(Это также должно работать на мобильных сенсорных экранах.) Спасибо.https://codepen.io/Daverino/pen/zboNoQ

    .toolTipDiv {
    	 float: none;
    	 width: 275px;
    	 margin-left: 20px;
    }
    
    .toolTipLink a {
   	  display: block;
   	  color: #202020;
   	  background-color: transparent;
   	  width: auto;
   	  padding: 0px 10px;
   	  text-decoration: none;
   	  font-size: 12px;
   	  margin-left: 0px;
   	  border-bottom-width: 1px;
   	  border-bottom-style: solid;
   	  border-bottom-color: #878787;
   	  line-height: 17px;
    }
    
    .toolTipLink a:hover {
   	  background-color: #ddd;
   	  color: #9B0E11;
   	  padding-left: 10px;
    }
    
    a.tooltip span {
   	  z-index: 10;
   	  display: none;
   	  padding: 7px 10px;
   	  margin-top: -80px;
   	  /* this doesn't do anything:
   	  margin-bottom: [any value]px;
   	  */
   	  margin-left: 200px;
   	  width: 140px;
   	  line-height: 16px;
   	  opacity: 0.85;
    }
    
    a.tooltip:hover span {
   	  display: inline;
   	  position: absolute;
   	  color: #EEE;
   	  background: #000;
    }
<body>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    
    <div class="toolTipDiv">
    
    <span class="toolTipLink"> 
    
    <a href=“#” class="tooltip">
    <div class="tooltipWrapper">
    <div class="toolTipEdge">Medium amount of text in this line.</div>
    <span>I want the bottom of every tooltip to be at the top of every line it hovers over.</span>
    </div>
    </a> 
    
    <a href=“#” class="tooltip">
    <div class="tooltipWrapper">
    <div class="toolTipEdge">This is the text that will be hovered over. Sometimes it may be this long</div>
    <span>The bottom of this tooltip is too low. It should be just above the line.</span>
    </div>
    </a> 
    
    <a href=“#” class="tooltip">
    <div class="tooltipWrapper">
    <div class="toolTipEdge">Here is a shorter line of text.</div>
    <span>Sometimes the text in the "tooltip" will be a couple sentences long. If the tooltip text is ong or if it is short, the bottom of the tooltip should be right above the hovered line.</span>
    </div>
    </a> 
    
    <a href=“#” class="tooltip">
    <div class="tooltipWrapper">
    <div class="toolTipEdge">Medium amount of text in this line.</div>
    <span>This tooltip is way too high.</span>
    </div>
    </a> 
    
    </span> 
    </div>
    
</body>

Ответы [ 3 ]

0 голосов
/ 05 марта 2019

Я предлагаю вам проверить Tippy.js это классная библиотека всплывающих подсказок и всплывающих окон, она легко настраивается.

0 голосов
/ 06 марта 2019

Парень из группы Facebook под названием HTML CSS JAVASCRIPT написал кодовую ручку, которая исправила это.Видимо я испортил абсолютное и относительное расположение.https://codepen.io/jkarkosza/pen/WmopbP

    .toolTipDiv {
    float: none;
    width: 275px;
    margin-left: 20px;
}
.toolTipLink a {
display: block;
color: #202020;
background-color: transparent;
width: auto;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #878787;
line-height: 17px;
}

.toolTipLink a:hover {
background-color: #ddd;
color: #9B0E11;
padding-left: 10px;
}

a.tooltip {
  position: relative;
}

a.tooltip span {
z-index: 10;
display: none;
padding: 7px 10px;
position:absolute; 
bottom: 100%;
color:#EEE;
background:#000;
/* margin-left: 200px; */
width: 140px;
line-height: 16px;
opacity: 0.85;
}

a.tooltip:hover span{
display:block;
}

<body>

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<div class="toolTipDiv">

<span class="toolTipLink"> 

<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>I want the bottom of every tooltip to be at the top of every line it hovers over.</span>
</div>
</a> 

<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">This is the text that will be hovered over. Sometimes it may be this long</div>
<span>The bottom of this tooltip is too low. It should be just above the line.</span>
</div>
</a> 

<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Here is a shorter line of text.</div>
<span>Sometimes the text in the "tooltip" will be a couple sentences long. If the tooltip text is ong or if it is short, the bottom of the tooltip should be right above the hovered line.</span>
</div>
</a> 

<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>This tooltip is way too high.</span>
</div>
</a> 

</span> 
</div>

</body>
0 голосов
/ 05 марта 2019

Для "span" вы сказали, что оно абсолютное, но не дали никакой информации о позиционировании. В этом случае добавьте «bottom»: 

   position: absolute;
   bottom: 0em;

Там также нет ничего относительно этого, поэтому добавьте: 

   .tooltipWrapper { position: relative; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...