Баг или можно исправить title right-border in FireFox?

517
30 декабря 2016, 10:13

<span title="Veeeeeeeeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonggg naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaammmmmmmmmmmmmmmmmmmmeeeeeeeeeeeeeeeeeeeeeeeeee">Hover me</span>

Смысл бага в чем, при длинном title когда наводишь на элемент только в FF (FireFox v50.1.0 и ниже) куда-то пропадает правый бордер у всплывающей подсказки, может кто сталкивался с подобным и знает как решить данный глюк.

Answer 1

Это официальный баг в Firefox, который так и не исправили до сих пор. https://bugzilla.mozilla.org/show_bug.cgi?id=805039

Answer 2

при помощи css можно создать тултип 

 <!DOCTYPE html>
    <html>
    <style>
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 1s;
    }
    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }
    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
    </style>
    <body style="text-align:center;">
    <h2>Tooltip</h2>
    <p>Move the mouse over the text below:</p>
    <div class="tooltip">Hover over me
      <span class="tooltiptext">Tooltip text</span>
    </div>
    </body>
    </html>
Answer 3

ну поскольку это баг firefox как написали выше то я нашел способ как его исправить )

document.getElementById("s").title = "aaaaaaaaaaaaaaa\nbbbbbbbbbb";
<span id="s">text</span>

READ ALSO
Проблема с &ldquo;поделиться&rdquo; в Facebook
HTML

Проблема с “поделиться” в Facebook

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

 391
ограничение доступа авторизации php [требует правки]
HTML

ограничение доступа авторизации php [требует правки]

Как посредством php запретить запуск скрипта на определенное время,если до этого он был запущен допустим 3 раза за некий промежуток времени?...

 357
Как записать в массив числа из тега input?
HTML

Как записать в массив числа из тега input?

Здравствуйте, как записать в массив числа в теге <input id="clck" type="text" value=""> разделенных запятыми? Допустим, пользователь ввел 12,12,4,6,7,9 - получилось...

 372
Как прятать блок, если в области видимости появился другой
HTML

Как прятать блок, если в области видимости появился другой

ЗдравствуйтеЕсть разметка:

 353