Цвет фона всплывающей подсказки CSS - PullRequest
Новая
       10

Цвет фона всплывающей подсказки CSS

0 голосов
/ 26 июня 2018

Вот мой код: 

/* Tooltip container */

.tip {
  position: relative;
  display: inline-block;
  cursor: help;/*change the cursor symbol to a question mark on mouse over*/
  color: inherit;/*inherit text color*/
  text-decoration: none;/*remove underline*/
}


/*Tooltip text*/

.tip span {
  visibility: hidden;
  width: 80%;
  text-align: left;
  padding: .6em;
  padding-left: 1em;
  border: 1px solid ;
  border-radius: 0.5em;
  font: 400 12px Arial;
  color: #ffffff;
  background-color: #000000;
  display: inline-block;/*Position the tooltip text*/
  position: absolute;/*positioned relative to the tooltip container*/
  bottom: -5px;
  top: 105%;
  z-index: 100;
}

.tip:hover span {
  visibility: visible;
}
<a href="javascript:void(0)" class="tip">
    Container text
    <span>
    Tooltip text
    </span></a>

Я пытаюсь, чтобы моя подсказка отображалась при наведении курсора на текст.Проблема в том, что хотя текст (в настоящее время белым) отображается поверх других элементов, фон (в настоящее время черным) - нет.Как сделать так, чтобы цвет фона был прозрачным, чтобы мой текст был виден?

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Проблема заключается в том, что ваш CSS позиционирует всплывающую подсказку: 

position: absolute;/*positioned relative to the tooltip container*/
bottom: -5px;
top: 105%;

Вам нужно только указать смещение относительно контейнера всплывающей подсказки с одним атрибутом - либо снизу, либо сверху, но не обоими.Используя оба, вы по сути определяете высоту для всплывающей подсказки и, поскольку ваш текст слишком велик, чтобы вписаться в эту ограниченную высоту, он выглядит обрезанным.Так что просто удалите либо верх, либо низ, и проблема решена.

0 голосов
/ 26 июня 2018

Я внес несколько изменений в ваш css, чтобы сделать текст видимым.Остальная часть вашего кода выглядит нормально.Запустите и проверьте из приведенного ниже фрагмента.

/* Tooltip container */
.tip{
position: relative;
display: inline-block;
cursor: help; /*change the cursor symbol to a question mark on mouse over*/
color: inherit; /*inherit text color*/
text-decoration: none; /*remove underline*/
}

/*Tooltip text*/
.tip span {
visibility: hidden;
width:80%;
text-align: center;
padding: 1em 0em 1em 0em;
border: 1px solid [template("base font color")];
border-radius: 0.5em;
font: 400 12px Arial;
color: #ffffff;
background-color: #000000;
display: inline-block;

/*Position the tooltip text*/
position: absolute; /*positioned relative to the tooltip container*/
top: 105%;
z-index:100;
}

.tip:hover span {
visibility: visible;
}
<a href="javascript:void(0)" class="tip">
Container text
<span>
Tooltip text
</span></a>
...