всплывающие подсказки html css при наведении на событие могу ли я сделать определенную ширину?

#html #css #hover #tooltip #inline

#HTML #css #наведите #всплывающая подсказка #встроенный

Вопрос:

Я научился создавать базовые всплывающие подсказки, однако мне нужно указать ширину для каждой из них. Код, который я использую, взят из школ w3:

 <style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 0%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

Текст всплывающей подсказки имеет значение 500 пикселей.
Мне нужно определить для каждого «диапазона» определенную ширину:

 <div class="tooltip">
this is the text to hover 
  <span class="tooltiptext">
this is the tooltip display
</span>
</div>

Я пробовал несколько способов определения ширины ( <style="width: 800ps;"> text </style>)
ни один из них не сработал.

Ответ №1:

Вы можете сделать это, используя встроенный стиль. Удалите ширину из .tooltip и укажите ширину для каждого подобного:

 <span class="tooltiptext" style="width: 100px;">

Ответ №2:

Лучшее, что можно сделать, это добавить идентификатор к вашим разделам всплывающих подсказок.

Самый простой способ описать идентификатор — это уникальное имя, присваиваемое элементу. Например, вместо классов, которые вы можете использовать для нескольких элементов. вы можете использовать идентификатор только для 1 элемента.

в базовом html и css это будет выглядеть примерно так:

HTML

 <div class="test" id="DivOne">
    <p>ID ONE<p>
</div>

<div class="test" id="DivTwo">
    <p>ID TWO<p>
</div>

css

 #DivOne{
    height: 200px;
    width:200px;
    background-color:red;
    color:white;
}
#DivTwo{
    height:200px;
    width:200px;
    background-color:black;
    color:white;
}

1. Я собирался попробовать это, но это ужасно много кода

2. Это также может быть возвращено к единому правилу для всех элементов. #DivOne, #DivTwo{ высота: 200 пикселей; ширина: 200 пикселей; цвет фона: черный; цвет: белый; }

Ответ №3:

Привет @anothen,

Для того, чтобы браузер учитывал ваш встроенный стиль, пожалуйста, удалите правило свойства width из вашего CSS-класса .tooltiptext, и это сделает работу. Не забудьте добавить ширину встроенного стиля к диапазону, как в примере ниже.

И последнее, но не менее важное: для правил CSS span вам на самом деле не нужен синтаксис .tooltip .tooltiptext , вы можете оставить его только с помощью .tooltiptext, поскольку это влияет только на этот элемент.

Я, конечно, надеюсь, что это поможет, приятель!

 .tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 6px;
  margin: 0 auto;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 0%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

 <div class="tooltip">
This is the text to hover 
<span class="tooltiptext" style="width:300px">
This is the tooltip display
</span>
</div>

Развернуть фрагмент

Ответ №4:

Я понял это, это работало, я просто забыл отключить кеш.