Как я могу создать всплывающие подсказки размером больше одной строки? - PullRequest
Новая
       6

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

0 голосов
/ 25 февраля 2011

У меня есть html-элементы, для которых я хочу показать больше информации во всплывающей подсказке при наведении курсора, чем фактически помещается в одну короткую строку.

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

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

Пример: 

<div title="1.Exampleline1\n2.Exampleline2\n3.Exampleline3 this one is longer"> //three rows - not one!

Это пример всплывающей подсказки:

enter image description here

РЕДАКТИРОВАТЬ: Должно работать во всех браузерах (FF тоже)!

Ответы [ 5 ]

2 голосов
/ 25 февраля 2011

Если вы не можете найти хорошее решение, используя только HTML, есть хороший способ сделать это с помощью JavaScript (на самом деле, jQuery).Вы должны проверить этот хороший учебник по yensdesign: http://yensdesign.com/2009/01/how-to-display-tips-creating-jquery-plugin/

2 голосов
/ 25 февраля 2011

Если вы нацелены только на те браузеры, которые поддерживают последнюю спецификацию или только на IE и Safari, вы можете использовать (возврат каретки).В противном случае посмотрите подсказки CSS .

Этот похожий вопрос об использовании возврата каретки в подсказках содержит больше информации.

2 голосов
/ 25 февраля 2011

ОБНОВЛЕНО Проверено в FF / Chrome

CSS 

a.tooltip {
    position: relative;
}
a.tooltip span em {
    font-style: normal;
    display: block;
    border-bottom: 1px dotted #000;
}
a.tooltip span {
    white-space: nowrap;
    border: 1px solid #CCC;
    color: #333;
    padding: 5px;
    background: #FFF;
    left: 50%;
    top: 0;
    width: auto;
    position: absolute;
    display: none
}
a.tooltip:hover span {
    display: block
}
a.tooltip span br {
    display: none
}

HTML 

<a class="tooltip">Hello World
  <span>
    <em>Lorem Ipsum Est Lorem <br />Ipsum Est Lorem Ipsum Est</em>
    <em>Lorem Ipsum Est</em> 
    <em>Lorem Ipsum Est</em>
    <em>Lorem Ipsum Est Lorem Ipsum Est</em>
    <em>Lorem Ipsum Est</em>
  </span>
</a>
0 голосов
/ 25 февраля 2011

Я использую overlib для такого рода вещей, поскольку он включает в себя такие опции, как наложение подсказок, их интеллектуальное позиционирование (например, слева, если источник находится на восьмом крае окна браузера и т. Д.), И вы можете легко их стилизовать.

http://www.bosrup.com/web/overlib/

0 голосов
/ 25 февраля 2011

Вы не можете увеличить всплывающую подсказку, но вы можете заставить DIV плавать рядом с курсором, когда они наводят курсор на него.

...