Styling native tooltip from title = "Текст подсказки"

У меня есть элемент ввода, у которого есть атрибут title, который, конечно же, приведет к появлению всплывающей подсказки с сообщением значения атрибута.Styling native tooltip from title = "Текст подсказки"

По какой-то причине эта всплывающая подсказка должна быть написана с помощью css.

Как это сделать? Я не знаю, в каком контейнере это будет показано, я ничего об этом не знаю. Также к нему нельзя получить доступ с помощью инструментов разработчика firebug

источник

2012-03-29 eomeroff

HTTP: // StackOverflow.com/questions/36275678/how-to-create-a-tooltip –

Кажется, что на самом деле существует чистое решение CSS, требующее только выражения css attr, сгенерированного контента и селекторов атрибутов (что говорит о том, что он работает еще в IE8):

a[title]:hover:after { 
    content: attr(title); 
    position: absolute; 
}

Источник: http://jsfiddle.net/tDQWN/

обновление ж/вход от @ViROscar: обратите внимание, что в этом нет необходимости использовать какой-либо конкретный атрибут, хотя я использовал «название» атрибут в приведенном выше примере ; на самом деле, моя рекомендация заключалась бы в использовании атрибута «alt», так как есть вероятность, что контент будет доступен для пользователей, которые не смогут воспользоваться CSS.

обновление снова Я не изменяя код, так как атрибут «название» имеет в основном приходят к виду «всплывающую подсказку» атрибут, и это, вероятно, не очень хорошая идея, чтобы скрыть важный текст внутри поля доступны только при наведении курсора мыши , но если вы заинтересованы в создании этого текста доступной «ария метки» атрибут, кажется, лучшее место для него: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

источник

2013-07-10 19:44:42

И если вы не хотите, чтобы всплывающая подсказка в конечном итоге отображалась также, вы всегда можете использовать тег «alt». –

Любите технику! Я попробовал это на изображении, вы знаете, почему это может не сработать? http://jsfiddle.net/tDQWN/4058/ – Chris

@ChrisNicholson Да, это не сработает, потому что изображения являются «недействительными» тегами, они не могут содержать псевдоэлементы. –

Собственная всплывающая подсказка не может быть оформлена.

При этом, вы можете использовать некоторые библиотеки, которые будут показывать стили плавающих слои, когда элемент время парил (вместо родных подсказок, и подавить их), требующие мало или нет кода модификации ...

источник

2012-03-29 14:42:13 poncha

Я не думаю, что вы можете подавить собственные всплывающие подсказки, если элемент имеет атрибут 'title'. Поэтому, если вы настроили собственную реализацию всплывающей подсказки, лучше использовать другой атрибут (например, 'data-tip') вместо' title'. –

вы можете, если после того, как вы прикрепите к событию, вы очистите атрибут title – poncha

Я вижу вашу точку зрения, но речь идет не о разработке собственных всплывающих подсказок; это о том, чтобы избежать их (путем изменения DOM). –

Вы не можете стиль подсказки браузера по умолчанию. Но вы можете использовать javascript для создания собственных пользовательских подсказок HTML.

источник

2012-03-29 14:42:49 bfavaretto

jsfiddle для пользовательской подсказки шаблона Here

Он основан на CSS позиционирования и pseduo класс селекторы

Проверить MDN docs для кросса-браузерных классов псевды

<!-- HTML --> 
<p> 
    <a href="http://www.google.com/" class="tooltip"> 
    I am a 
     <span> (This website rocks) </span></a>&nbsp; a developer. 
</p> 

    /*CSS*/ 
a.tooltip { 
    position: relative; 
} 

a.tooltip span { 
    display: none;  
} 

a.tooltip:hover span, a.tooltip:focus span { 
    display:block; 
    position:absolute; 
    top:1em; 
    left:1.5em; 
    padding: 0.2em 0.6em; 
    border:1px solid #996633; 
    background-color:#FFFF66; 
    color:#000; 
}

источник

2013-06-13 05:22:58 prasun

Это должно быть upvote :) –

Я нашел ответ здесь: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

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

CSS

.tags { 
    display: inline; 
    position: relative; 
} 
.tags:hover:after { 
    background: #333; 
    background: rgba(0,0,0,.8); 
    border-radius: 5px; 
    bottom: -34px; 
    color: #fff; 
    content: attr(glose); 
    left: 20%; 
    padding: 5px 15px; 
    position: absolute; 
    z-index: 98; 
    width: 350px; 
} 
.tags:hover:before { 
    border: solid; 
    border-color: #333 transparent; 
    border-width: 0 6px 6px 6px; 
    bottom: -4px; 
    content: ""; 
    left: 50%; 
    position: absolute; 
    z-index: 99; 
}

HTML

<a class="tags" glose="Text shown on hovering">Exposed text</a>

источник

2016-01-28 19:02:57

Styling native tooltip from title = "Текст подсказки"

ответ

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