Товаров: 0 (0р.)

Всплывающая подсказка при наведении html: Всплывающая подсказка на CSS | htmlbook.ru

Содержание

Всплывающая подсказка при наведении курсора на элемент



Я следовал этому примеру для всплывающей подсказки при наведении курсора. Я не могу этого сделать, когда у меня уже есть класс, назначенный тегу элемента <i> . Я обнаружил, что могу назначить 2 класса одному и тому же элементу, разделив их пробелом. Но значок исчезает, если у меня есть подсказка класса.

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<td>
  <i ng-click="view(application._id)" data-toggle="tooltip" title="Hooray!">
    receipt
  </i>
  <span>Tooltip text</span> &nbsp;&nbsp;
  <i ng-click='edit(application._id)'>
    edit
  </i> &nbsp;&nbsp;
  <i ng-click="remove(application._id)">
    delete
  </i>
</td>

Как я могу иметь всплывающую подсказку с наведением курсора на эти значки <i> ? В моем css всплывающая подсказка — это visibility: hidden; . как это исправить?

Edit -я добавил таблицу стилей,которая, если я включу ее, будет невидимой.

Я создал jsfiddle- https://jsfiddle.net/TTrain/r5hhkwLb/

html css angularjs
Поделиться Источник Dreams     16 октября 2017 в 13:49

4 ответа

  • Javascript всплывающая подсказка появляется только при втором наведении курсора

    Я использую jQuery и Twitter Bootstrap и хочу, чтобы при наведении курсора на ссылку появлялась всплывающая подсказка . Однако всплывающая подсказка не появляется при первом наведении курсора мыши на ссылку, но если я убираю мышь и снова включаю ее, она работает каждый раз для этой ссылки. У меня…

  • Позволяют при наведении курсора всплывающая подсказка

    Я создал подсказка div, чтобы придумать, когда есть при наведении курсора на кнопку меню, Всплывающая подсказка появляется при наведении курсора мыши на кнопку, и исчезает, когда вы mouseout, но я хочу быть в состоянии, чтобы перейти в подменю (#submenu.Solutions в данном случае) и понятия не…


2

Хей Ман! Я постараюсь ответить вам как можно проще

Вам не нужен новый класс для эффекта всплывающей подсказки

HTML :

I'm using Font Awesome Framework, like as Your

<body>

    ... HTML CONTENT ...

    <i>
        <span>My beautiful tootip</span>
    </i>

    ... OTHER HTML CONTENT ...

</body>

CSS :

i {
    position: relative; /** ADD THIS TO i TAG. This do magic! It's necessary **/
}

i span {
    visibility: hidden;
    opacity:  0;
    position: absolute; /** It's necessary to do magic **/
    bottom: -32px; /** Show Tooltip 32px bottom "i" tag. Depends on "i" tag height =) **/
    left: 0;
    text-align: center; /** If You want tooltip text centered **/
    padding: 5px; /** Tooltip padding **/
    width: 150px; /** Tooltip width. You can set 100% to cover all "i" tag **/
    height: auto; /** Auto is good choice **/
    background: #000; /** Tooltip background **/
    color: #fff; /** Tooltip text color **/
}

i:hover span {
    visibility: visible;
    opacity: 1;
}

ADDITIONAL-отлично! Но я хочу красивую анимацию (переход). Как я могу это сделать?

Добавьте к приведенному выше коду CSS следующие строки

i span {
    
    /** . .. OTHER RULES SEE ABOVE ... **/

    transition-duration: 0.2s; /** Animation duration **/
    transition-property: opacity; /** Apply animation only on opacity rule **/
    
    /** Compatibility with other Browsers */
    -moz-transition-duration: 0.2s;
    -moz-transition-property: opacity;
    -o-transition-duration: 0.2s;
    -o-transition-property: opacity;
    -ms-transition-duration: 0.2s;
    -ms-transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-property: opacity;
}

Поделиться Pietro Terracciano     16 октября 2017 в 14:14


1

у вас есть закрывающий </i>

в строке кода. Если вы поместите его в конец, он тоже не будет работать, так как текст всплывающей подсказки будет нечитаемым. Вы должны сделать что-то вроде этого:

    <span><i ng-click="view(application._id)" >receipt</i><span>Tooltip text</span></span>&nbsp;&nbsp;

Пол

PS: он работает на моем PC. Я создал для него fiddle. https://codepen.io/anon/pen/mBQboL . Я не смог включить шрифт значка, но значок не исчезает.

Поделиться MEE     16 октября 2017 в 13:54


1

пядь

место внутри меня

У вас есть проблема в этом

 <i ng-click="view(application._id)" >receipt</i><span>Tooltip text</span>&nbsp;&nbsp;

Решение

  <i ng-click="view(application._id)" >receipt<span>Tooltip text</span></i>&nbsp;&nbsp;

Поделиться LSKhan     16 октября 2017 в 13:56


1

Возможно, вы можете использовать Title=»Tooltip Text» внутри тега i или любого другого элемента, такого как img.

Поделиться benok     16 октября 2017 в 13:56

Похожие вопросы:


jQuery подсказка инструмента при наведении курсора

Мне нужна очень легкая всплывающая подсказка, похожая на 1, найденную здесь http: / / www.history.com / videos при наведении курсора на ссылку видео в разделе популярные видео всплывающая подсказка…


всплывающая подсказка bootstrap не работает при наведении мыши

Я пытаюсь сделать Bootstrap tooltip при наведении курсора мыши на поле ввода формы, но это не работает. Если вы нажмете на поле ввода, то появится всплывающая подсказка. Однако я хочу, чтобы он…


Всплывающая подсказка не отображается при наведении курсора мыши

Всплывающая подсказка bootstrap отображается только при фокусировке, а не при наведении курсора. Подсказка действительно правильно отображается с правой стороны. Использование Bootstrap 2.3.1….


Javascript всплывающая подсказка появляется только при втором наведении курсора

Я использую jQuery и Twitter Bootstrap и хочу, чтобы при наведении курсора на ссылку появлялась всплывающая подсказка . Однако всплывающая подсказка не появляется при первом наведении курсора мыши…


Позволяют при наведении курсора всплывающая подсказка

Я создал подсказка div, чтобы придумать, когда есть при наведении курсора на кнопку меню, Всплывающая подсказка появляется при наведении курсора мыши на кнопку, и исчезает, когда вы mouseout, но я…


ExtJS/HTML — всплывающая подсказка не скрывается при наведении мыши

Я добавил значок к fieldLabel. При наведении курсора мыши на значок Я показываю всплывающую подсказку. Но при наведении мыши всплывающая подсказка не hidden/destroyed. Моя цель верна? Я также…


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

У меня есть кнопка переключения с помощью плагина bootstrap toggle, и я хотел, чтобы всплывающая подсказка появлялась при наведении на нее курсора мыши.

<input type=checkbox data-size=mini…


Обновите элемент, чтобы появилась его новая всплывающая подсказка (в jQuery/Javascript)

У меня есть элемент html, который использует всплывающую подсказку bootstrap, чтобы показать заголовок при наведении на него курсора. Однако при нажатии на этот элемент я меняю всплывающую…


Всплывающая подсказка отображается при наведении курсора на черное пространство

http:/ / fiddle.jshell.net/9m6a5y5p / Как вы можете видеть в демо выше, при наведении курсора над элементом span отображается всплывающая подсказка, и я хочу показать ее только при наведении курсора…


Запуск всплывающей подсказки bootstrap при наведении курсора мыши на другой элемент

Я пытаюсь вызвать всплывающую подсказку bootstrap, чтобы она появилась на одном элементе, наведя курсор мыши на другой элемент. Я подумал, что, возможно, мог бы использовать JQuery- addClass(hover)…

Html hint при наведении – Тарифы на сотовую связь