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

Question

Я хочу добавить всплывающую подсказку в поля только для чтения с помощью jquery. читать данные из текстового поля только для чтения и показывать как подсказку. Я не могу найти его решение в Google

 $(document).ready(function () {
    $('#nextDate').keyup(function () {
        $(this).attr('title', $(this).val())
    })
}) 

html

 <td><input type="text" title="" id="nextdate" class="form-control" readonly=""/></td>

, но оно не работает

Answer 1

Вы не должны вставлять никакие строки внутри readonly, Inside readonly должен иметь значение true / false или readonly = "readonly", если вы вставляете любую пользовательскую строку, такую ​​как readonly = "Привет, это только для чтения". Это сделает ввод доступным только для чтения в интеллектуальных браузерах, таких как chrome, но в старых браузерах может произойти сбой. Поэтому, если вы хотите показать любое настраиваемое сообщение, вы можете создать и настроить атрибут следующим образом:

 <input type="text" readonly="readonly" data-readonly="hi, i am readonly" value="Hi i am input3" />

И вы можете получить это значение через:

$(this).attr('data-readonly')

, вы можете проверить это скрипка также: https://jsfiddle.net/nr06Lmte/

Answer 2

Я использую указатель мыши над событием вместо событие keyup . Возможно, это будет полезно для вас.

  <td><input type="text" title="hello" id="nextdate" class="form-control" value="2020-10-10" readonly="" onmouseover="myFunction()"/></td>
<script>
function myFunction(){
 document.getElementById('nextdate').setAttribute('title',   document.getElementById('nextdate').value);
}
</script>