Как иметь разрыв Линия в заглавной значении

Я создал этот кусок кода HTML, у него есть подсказка инструмента стиля CSS и ссылка на этот наконечник инструмента, всякий раз, когда вы наводите курсор на него, вы увидите фрагмент текста.
Но теперь я хочу отобразить две или более строк текста в подсказке. Как я могу это достичь?Как иметь разрыв Линия в заглавной значении

Я пробовал использовать \n и <br>, но не имеет никакого эффекта.

<!DOCTYPE html> 
 
<html> 
 
    
 
    <head> 
 
     <style> 
 
      table, th, td { 
 
       border: 1px solid black; 
 
      } 
 
     </style> 
 
     <title>CSS3 tooltip</title> 
 
     <style type="text/css"> 
 
      .ordertooltip { 
 
       display: inline; 
 
       position: relative; 
 
      } 
 
      .ordertooltip:hover:after { 
 
       background: #333; 
 
       background: rgba(0, 0, 0, .8); 
 
       border-radius: 5px; 
 
       bottom: 26px; 
 
       color: #fff; 
 
       content: attr(title); 
 
       left: 20%; 
 
       padding: 5px 15px; 
 
       position: absolute; 
 
       z-index: 98; 
 
       width: 220px; 
 
      } 
 
      .ordertooltip:hover:before { 
 
       border: solid; 
 
       border-color: #333 transparent; 
 
       border-width: 6px 6px 0 6px; 
 
       bottom: 20px; 
 
       content:""; 
 
       left: 50%; 
 
       position: absolute; 
 
       z-index: 99; 
 
      } 
 
     </style> 
 
    </head> 
 
    
 
    <body> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> <a title="1-Line One\n2-Line two<br>3-Line Three" class="ordertooltip"><span title="More">My Tip</span></a> 
 

 
    </body> 
 

 
</html>

UPDATE

Ok используя  работы таким образом, чтобы я не применять мой CSS, но когда я применить это не работает снова.

UPDATE 2

спасибо за ваши ответы, но я должен сказать, что я не могу использовать внешние библиотеки.
и мне нужно поддерживать хотя бы Firefox, поэтому для входа я не буду работать.

UPDATE 3

Я нашел обходной путь для моей проблемы и ответить на него here, но это, конечно, не и приемлемый ответ, потому что это просто обходной путь. надеюсь, что кто-то принесет хорошее решение для оригинального вопроса.

источник

2015-11-25 Masih Akbari

взгляд на это, может быть вам следует использовать PHP файл http://stackoverflow.com/questions/358874/how-can-i-use-a-carriage-return-in -a-html-tooltip – goupil

использование код для линия разрыв. проверьте это - http://stackoverflow.com/questions/3340802/add-line-break-within-tooltips –

В вашей разметке есть ошибка. Вы закрываете '' и '', но не открываете его нигде. – abhishekkannojia

У вас есть несколько вариантов:

Используйте подсказку плагин (http://iamceege.github.io/tooltipster/ не плохо)
Просто нажмите клавишу "Ввод" (поддерживается не во всех браузерах)

Для вариант 2, вот как выглядит код:

<a title="First line 
Second line 
Third line">My link</a>

Я не тестировал совместимость браузера хотя.

Для получения дополнительной информации посетите this stackoverflow post.

Вариант 2 демо:

a { background-color: #c3c3c3; display: block; width: 100px; height: 100px; }

<a title="This is a title 
 
Second line 
 
Third line">Contents</div>

Тогда просто добавьте свой собственный CSS.

Но лично, если бы я был вами, я бы просто использовал библиотеку всплывающих подсказок. Это намного проще, и есть много вариантов. Не изобретайте колесо!:)

источник

2015-11-25 06:00:44 Nathan

спасибо за ваш ответ, но я не могу использовать какую-либо внешнюю библиотеку, и мне нужно поддерживать хотя бы Firefox, просто нажатие кнопки не работает в исправлении огня. –

см. Мои обновления –

@MasihAkbari Нет внешней библиотеки? :(В этом случае вам в основном придется воссоздать более простую версию библиотеки. В основном, используя javascript/jquery, когда пользователь наводится над тегом '', найдите позицию курсора, используя переменную 'event' и динамически создайте элемент html в этой позиции. Сложный и беспорядочный, хотя. – Nathan

Если текст всплывающей подсказки не изменяет время выполнения, то вы можете дать фиксированную ширину .ordertooltip:Hover:after

И использовать  для разрыва строки;

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, th, td { 
 
    border: 1px solid black; 
 
} 
 
</style> 
 

 

 
<title>CSS3 tooltip</title> 
 
\t 
 
<style type="text/css"> 
 
\t 
 
.ordertooltip{ 
 
    display: inline; 
 
    position: relative; 
 
} 
 
\t \t 
 
.ordertooltip:Hover:after{ 
 
    background: #333; 
 
    background: rgba(0,0,0,.8); 
 
    border-radius: 5px; 
 
    bottom: 26px; 
 
    color: #fff; 
 
    content: attr(title); 
 
    left: 20%; 
 
    padding: 5px 15px; 
 
    position: absolute; 
 
    z-index: 98; 
 
    width: 100px; 
 
} 
 
\t \t 
 
.ordertooltip:Hover:before{ 
 
    border: solid; 
 
    border-color: #333 transparent; 
 
    border-width: 6px 6px 0 6px; 
 
    bottom: 20px; 
 
    content: ""; 
 
    left: 50%; 
 
    position: absolute; 
 
    z-index: 99; 
 
} 
 
\t 
 
    </style> 
 

 

 
</head> 
 

 

 
<body> 
 

 
</br></br></br></br> 
 
<a title="1-Line One&#013;2-Line two&#013;3-Line Three" class="ordertooltip"><span title="More">My Tip</span></a> 
 

 

 
</body> 
 
</html>

Надеется, что это помогает двигаться вперед.

источник

2015-11-25 06:17:48 ketan

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

Я НЕ ПРИНЯТЬ СВОЙ ОТВЕТ ТАК ЭТО ПРОСТО РЕШЕНИЕ НЕ ОТВЕТ

Я изменил мою CSS и продолжительность использования в моем HTML, так что теперь я могу поставить разрыв строки с <br> тегом.

<!DOCTYPE html> 
 
<html> 
 
    
 
    <head> 
 
     <style type="text/css"> 
 
      .txt { 
 
\t \t \t \t display: inline-block; 
 
\t \t \t \t position: relative; 
 
\t \t \t } 
 
\t \t \t .ordertooltip { 
 
\t \t \t \t display: none; 
 
\t \t \t \t width: 200px; 
 
\t \t \t \t position: absolute; 
 
\t \t \t \t padding: 8px; 
 
\t \t \t \t margin: 4px 0 0 4px; 
 
\t \t \t \t top: 20; 
 
\t \t \t \t left: 16px; 
 
\t \t \t \t border: 1px solid #76B6D7; 
 
\t \t \t \t border-radius: 0px 8px 8px 8px; 
 
\t \t \t \t background: #bedffe; 
 
\t \t \t \t font-size: 15px; 
 
\t \t \t \t box-shadow: 0 1px 2px -1px #21759B; 
 
\t \t \t \t z-index: 999; 
 
\t \t \t \t background-position: 0 0; 
 
\t \t \t \t border-color: #76B6D7; 
 
\t \t \t \t background-color: #bedffe; 
 
\t \t \t \t box-shadow-color: #21759B; 
 
\t \t \t } 
 
\t \t \t .txt:hover .ordertooltip { 
 
\t \t \t \t display: block; 
 
\t \t \t } 
 
     </style> 
 
    </head> 
 
    
 
    <body> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
\t \t <span class="txt">My Tip</a> 
 
\t \t \t \t <span class="ordertooltip">1-Line One<br>2-Line two<br>3-Line Three</span> 
 
\t \t </span> 
 

 
    </body> 
 

 
</html>

источник

2015-11-25 09:44:58

Как иметь разрыв Линия в заглавной значении

ответ

Смежные вопросы