Атрибут title | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Описание
Описывает содержимое элемента в виде всплывающей подсказки, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.
Синтаксис
title="текст"
Значения
Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
Применяется к тегам
<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo><bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>
Пример
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут title</title>
</head>
<body>
<p title="А вот и я!">Пример всплывающей подсказки</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки
Сделать так, чтобы текст отображался при наведении курсора на кнопку
То, что я хочу сделать, это иметь что-то вроде этого:
<button>+</button>
Сделайте такой эффект:
когда вы нависаете над ним.
Я смог найти несколько разных вещей для этого, но ни одна из них не действует так, как я хочу, чтобы это было в видео.
html css5 ответов
- Сделать, чтобы показать div при наведении на текст
Я создаю div, как показано ниже, и я хочу сделать так, чтобы показать этот Div при наведении курсора на текст, как всплывающая подсказка. <Div id=cont> <table> . . <.table> </div> <Label> Show Me </label>
- показать состояние кнопки в jquery при наведении на нее курсора мыши
Я работаю над приложением, использующим html и jquery. Он имеет 4 кнопки, которые используются для выполнения различных задач, когда я нажимаю на них. теперь я хочу показать пользователю состояние кнопки при наведении на нее курсора мыши. Например, для кнопки включения/выключения при наведении…
64
Использовать title
для того, чтобы показать ваше сообщение:
<button title="click here">+</button>
Поделиться Bhargav Chudasama 02 августа 2017 в 09:18
3
.addMore{
border: none;
width: 32px;
height: 32px;
background-color: #eee;
transition: all ease-in-out 0. 2s;
cursor: pointer;
}
.addMore:hover{
border: 1px solid #888;
background-color: #ddd;
}
<button title="Hover on me!">+</button>
Поделиться
0
Вы можете установить изменение цвета фона кнопки с помощью css следующим образом,
.addMore:hover {
background-color: #545454; //desired color code
}
и установите всплывающую подсказку как <button title="click here">+</button>
Поделиться kmg 02 августа 2017 в 09:24
0
Для всех моих React.JS
ers там (и для людей, которые придут после), я смог достичь этого, сделав (и используя reactstrap lib):
Использование компонента всплывающей подсказки
import { Button } from 'reactstrap'
<Tooltip
tooltipContent={
'You cannot cancel invoices that were created automatically by memberships!'
}
component={
<span id={'cancelButton'}>
<Button
style={{ pointerEvents: 'none' }}
onClick={. ..}
disabled
>
Cancel
</Button>
</span>
}
/>
Tooltip.jsx
import React, { useState } from 'react'
import * as Reactstrap from 'reactstrap'
const Tooltip = props => {
const [tooltipOpen, setTooltipOpen] = useState(false)
const toggle = () => setTooltipOpen(!tooltipOpen)
// Warnings for component useage
if (!props.component) {
console.warn('Missing component for tooltip')
}
if (!props.tooltipContent) {
console.warn('Missing content for tooltip')
}
if (props.component && !props.component.props.id) {
console.warn('Component for tooltip has no id (must not have spaces)')
}
return (
<React.Fragment>
{props.component}
{props.tooltipContent && (
<Reactstrap.Tooltip
placement={props.placement ? props.placement : 'top'}
isOpen={tooltipOpen}
target={props.component.props.id}
toggle={toggle}
delay={props. delay ? props.delay : 750}
>
{props.tooltipContent && (
<div className="row p-2">
<div className="col-md-12">{props.tooltipContent}</div>
</div>
)}
</Reactstrap.Tooltip>
)}
</React.Fragment>
)
}
Tooltip.displayName = 'Tooltip'
export default Tooltip
Наиболее важными частями являются style={{ pointerEvents: 'none' }}
на элементе <Button />
и вложенность кнопки в <span />
Поделиться Tanner Hallman 03 декабря 2019 в 17:48
0
<button type='submit' title='Add New Item'>+</button>
Поделиться MoJo 08 апреля 2020 в 15:48
Похожие вопросы:
Как сделать так, чтобы текст появлялся поверх изображения при наведении курсора?
При наведении курсора мыши на изображение изображение будет размыто, а поверх него появится текст. Я попробовал сделать это сам, используя приведенный ниже код, но оказалось, что text перемещается…
Как сделать так, чтобы текст появлялся при наведении курсора мыши?
Мне было интересно, знает ли кто-нибудь, как заставить текст появляться при наведении курсора на элемент, в данном случае на NSImage? Лучший пример того, о чем я говорю, — это когда вы наводите…
создайте кнопку, которая будет отображать текст при наведении курсора мыши
Я знаю, как создать текст справки с помощью события наведения курсора мыши. Однако это не работает при использовании смартфона. Есть ли способ создать кнопку, которая при нажатии будет отображать…
Сделать, чтобы показать div при наведении на текст
Я создаю div, как показано ниже, и я хочу сделать так, чтобы показать этот Div при наведении курсора на текст, как всплывающая подсказка. <Div id=cont> <table> .. <.table>…
показать состояние кнопки в jquery при наведении на нее курсора мыши
Я работаю над приложением, использующим html и jquery. Он имеет 4 кнопки, которые используются для выполнения различных задач, когда я нажимаю на них. теперь я хочу показать пользователю состояние…
Есть ли способ заставить другие элементы исчезнуть при наведении курсора на 1 элемент
Я пытаюсь сделать так, чтобы при наведении курсора мыши на одну из ссылок на моей заставке отображался текст, а другие кнопки исчезали. Затем, когда вы перестаете парить над ним, элементы появляются…
Сделать так, чтобы текст появлялся при наведении курсора мыши
Поэтому мне нужно, чтобы текст появлялся при наведении курсора мыши на изображение (это не обязательно должна быть ссылка, Если это слишком сложно) html <div id=con> <div id=box1> <p…
Как сделать так, чтобы текст отображался на изображении?
Есть ли способ заставить текст появиться на встроенном изображении? [Этот текст появляется при наведении курсора на изображение]
Как сделать так, чтобы при наведении курсора мыши на пункт меню появлялся дополнительный текст?
Я пытаюсь сделать так, чтобы текст появлялся при наведении курсора после пункта меню (поэтому, если в меню написано HOME, я бы хотел, чтобы сердце появлялось при наведении курсора на домашнюю.
Измените значок FontAwesome на текст при наведении курсора
Как заменить значок текстом при наведении курсора? Я пишу этот сайт в React, однако я изменил его так, чтобы он правильно отображался в JSFiddle. Когда я навожу курсор на один из пузырьков, я бы…
При наведении на текст, появляется скрытый текст или картинка. Пример на CSS
CSS3 позволил делать много новых эффектов, не прибегая к помощи JavaScript-библиотек. В этой статье расскажу о том, как реализовать с помощью css3 плавное появление любого элемента.
Смотрим на примере
Допустим, у нас есть два одинаковых блока. В html разметке я предлагаю обозначить их так:
Блок 1
Блок 2
Каждый элемент получил два стилевых класса. Зачем это нужно? Первым классом мы зададим общие правила внешнего вида, блоки же одинаковые, так что их можно описать совместно. В реальном примере, скорее всего, будет по-другому. Также каждый элемент получил собственный уникальный стилевой класс.
Он тоже пригодится.Block{ font-size: 50px; width: 200px; height: 120px; background: green; margin-bottom: 30px; transition: 1s }
Этими правилами мы прописали обоим блокам одинаковый внешний вид: высоту, ширину, размер шрифта, отступ и зеленый фон. Последнее свойство transition как раз и является относительно новым и входит в версию CSS3 . Оно обозначает задержку, после которой выполняются определенные правила. По сути, именно это дает плавное появление.
В примере я прописал 1 секунду, по желанию можно поставить больше или меньше. Когда вы увидите свойство в действии, то сами сможете отрегулировать его значение.
Как реализовать в css3 плавное появление?
Дальше есть два варианта действий. Допустим, нам нужно пока скрыть второй блок, а при наведении на первый плавно выводить его. Наиболее часто для скрытия элемента применяют правило display: none , но оно не даст именно того, чего нужно – плавного появления. Элемент появится резко.
Поэтому мы поступим по-другому. Смотрите этот код:
Block2{ opacity: 0; } .block1:hover + .block2{ opacity: 1 }
Мы использовали еще одно CSS3-свойство – opacity . Оно задает прозрачность элемента, которая прописывается от 0 (полностью прозрачный) до 1 (полностью непрозрачный) элемент.
Сначала полностью убираем второй блок от глаз, делая его прозрачным. Теперь нужно сделать так, чтобы при наведении мышки на первый блок плавно появлялся второй. Для этого используется такой вот интересный комбинированный селектор.block1:hover + .block2
То есть само изменение стилей происходит при наведении на первый блок, а изменяется непосредственно второй. Благодаря прописанному ранее transition он появится не резко, а плавно, что нам с вами и нужно. Изменяя значение transition можно сделать появление более резким или наоборот еще больше замедлить его.
В сегодняшнем уроке мы будем реализовывать эффект, который в основном подойдет для изображений. Результатом урока будет появляющееся описание при наведение на изображение.
Данный эффект немного напоминает эффект, который реализован в Яндкес.Картинки . Может и большого сходства нет, но что-то похожее наблюдается.
Шаг 1. HTML-разметка
HTML-разметка очень простая. Состоит из основного блока, картинки и блока с описанием:
Wattie Buchan
The Exploited
Шаг 2. Стили основного блока
В данном шаге мы напишем стили для основного блока. Для этого создадим класс и назовем его columns :
Columns { position: relative; width: 200px; display: inline; float: left; margin: 10px; padding: 0; }
Здесь мы указали ширину блока, установили способ позиционирования элемента, внешние отступы также установили выравнивание.
Шаг 3. Стили для изображения
В данном шаге мы напишем стили для изображения, которое находится внутри блока item :
Item img { position: relative; }
Шаг 4. Стили для блока с описанием
В этом шаге мы напишем стили для блока с описанием, который имеет класс info :
Info { position: absolute; left: -10px; top: -10px; padding: 210px 12px 5px 8px; width: 200px; background: #fff; display: none; box-shadow: 0px 0px 6px #7d7d7d; } . info p {font-family: Tahoma; font-size: 13px;}
Здесь мы указали ширину блока, фоновый цвет, тени, внешние и внутренние отступы, а также скрыли блок с описанием. Т. е. он будет появляться только при наведение на него мышью.
Шаг 4. Псевдоэлемент:hover
На данном шаге мы пропишем стили для псевдоэлемента:hover. Т.е. действие, которое будет совершаться при наведении курсора на блок с картинкой:
Item:hover .info { display: block; z-index: 99; } .item:hover { z-index: 99; }
Здесь мы указали свойство display: block; . Это нужно для того, чтобы элемент появлялся при наведении на него мышью. Также мы указали значение z-index: 99.
Если на данном шаге посмотреть результат, то мы увидим, что при наведении появляется блок с описанием. Но, при этом картинка уходит на задний план. Чтобы решить данную проблему нам нужно прописать следующие стили:
Item:hover img { z-index: 999; }
Мы придали свойству z-index значение 999 . Это говорит о том, что теперь картинка находится выше всех остальных элементов. Поэтому, ее теперь будет видно при наведении мышью.
Полный код стилей
Columns { position: relative; width: 200px; display: inline; float: left; margin: 10px; padding: 0; } .item img { position: relative; } .info { position: absolute; left: -10px; top: -10px; padding: 210px 12px 5px 8px; width: 200px; background: #fff; display: none; box-shadow: 0px 0px 6px #7d7d7d; } .info p {font-family: Tahoma; font-size: 13px;} .item:hover .info { display: block; z-index: 99; } .item:hover { z-index: 99; } .item:hover img { z-index: 999; }
На этом данный урок закончен. Спасибо за внимание.
Салютики!
Мне на ушко прошептал wordstat.yandex.ru, что вы ищите эффект, когда при наведении на текст появляется скрытый текст или картинка . В этой статье я не только выложу код этого эффекта, но и покажу, как сделать, чтобы при наведении текст или картинка появлялись и исчезали. Код не сложный, написан на обычном HTML+CSS.
Этот эффект можно использовать:
Если нужно вставить скрытую подсказку к слову;
Если нужно показать ответ на загадку;
Если нужно показать вариант ответа на тест;
И другие варианты
○ При наведении на текст, появляется скрытый текст
В HTML вставьте вот этот код:
Плиз!! Ты крут!:)
Какие плагины эффектов использовать на WordPress?
Зачем нужны плагины эффектов
Плагины WordPress — это маленькие программы, которые помогают сконфигурировать и оформить сайт перед размещением контента на нём. С их помощью можно решать многие задачи — от настройки поисковой оптимизации до добавления контактных форм и размещения интернет-магазина. Плагинами очень просто пользоваться благодаря интуитивно понятному интерфейсу.
С помощью плагинов вы можете добавить анимационные эффекты для WordPress, которые разнообразят ваш сайт. В статье мы расскажем о нескольких таких бесплатных плагинах.
Mouse cursor customizer
Плагин Mouse cursor customizer (настройщик курсора мышки) позволяет заменить стандартный курсор на любое изображение в форматах PNG, JPG и JPEG. Загрузите изображение, и пользователи вашего сайта будут видеть новый необычный курсор. На странице можно установить один вид курсора, а при наведении на ссылки или кнопки — другой. Также можно регулировать его размер.
Пример обновлённого курсора ниже. Заметьте, что при наведении на ссылку он меняется:
Weather Effect
С помощью плагина Weather effect (Погодные эффекты) можно добавить на страницы сайта разные «падающие» объекты. Это могут быть погодные явления разных времён года (например снежинки, звёздочки, солнышки, капли дождя, осенние листья) или объекты, приуроченные к праздникам (валентинки, шарики, рождественские подарки). Все объекты разбиты на группы по темам: Рождество, зима, осень, весна, лето, дождь, Хэллоуин, День благодарения, День святого Валентина, Новый год. Вы можете регулировать размер объектов, их количество и скорость падения на странице сайта.
Посмотрите, как может выглядеть на вашей странице плагин WordPress Эффект воды:
Easy Textillate
Плагин Easy Textillate предназначен для анимации текста на сайте. Он очень прост в использовании. Вы добавляете какой-либо текст в окно редактирования и выбираете нужные эффекты Вордпресс. В окне предпросмотра можно сразу увидеть, как будет выглядеть анимация на сайте. При этом автоматически создаётся шорткод. Вам остаётся только скопировать шорткод и добавить его на страницы, в записи или виджеты сайта (например календарь, облако меток, поиск).
Плагин имеет большое количество эффектов для начальной и конечной анимации — как текст появляется на странице и как он исчезает. Вы можете использовать дополнительные опции шорткода: выбрать шрифт для текста, его цвет и размер.
Как выглядит создание анимации для текста в редакторе:
Скопируем полученный шорткод и добавим его на страницу сайта в редакторе:
А вот как выглядит результат на сайте — теперь текст стал анимированным:
Image Hover Effects Ultimate
Плагин Image Hover Effects Ultimate нужен для добавления hover-эффекта — эффекта наведения. Это значит, что при наведении курсора на изображение или текст появляется анимация.
В бесплатной версии этого плагина есть 8 различных эффектов для настройки анимации при наведении. В настройках вы можете установить любое фоновое изображение или добавить текст, который будет появляться при наведении. После этого достаточно скопировать получившийся шорткод и добавить его в любую запись на сайте или на страницу.
Рассмотрим примеры. Один из эффектов плагина — General Effects:
Эффект Flipbox Effects:
Hover Effects — easily create any hover effect
Ещё один плагин Hover Effects с 39 интересными эффектами для WordPress. Можно добавить анимацию при наведении курсора как на изображение, так и на текст.
Использовать этот плагин очень просто. Нужно навести курсор на эффект в меню плагина, чтобы посмотреть, как будет выглядеть анимация:
Затем можно нажать на понравившийся эффект. Автоматически скопируется код. Когда вы будете редактировать запись или страницу, добавьте этот код в поле «Дополнительные классы CSS»:
Пример двух разных эффектов анимации текста и изображения на сайте:
Image Hover Effects Addon for Elementor
С помощью Image Hover Effects Addon for Elementor также можно добавлять эффекты при наведении курсора. Этот плагин можно использовать, если у вас есть плагин Elementor. Например, на хостинге для WordPress он уже установлен.
С плагином Image Hover Effects Addon for Elementor можно настроить эффект анимации — при наведении курсора на изображение будет появляться текст. Начните редактировать страницу через конструктор страниц Elementor. Затем перетащите виджет Image Hover Effects, выберите вид анимации, изображение и введите текст, который будет появляться при наведении:
Пример анимации на сайте:
Помогла ли вам статья? 14
раз уже
помогла
css всплывающая подсказка при наведении на текст
На чтение 6 мин. Просмотров 69 Опубликовано
В HTML уже есть глобальный атрибут title , который можно добавить к любому элементу веб-страницы. Наличие этого атрибута добавляет всплывающую подсказку, которая появляется при наведении курсора мыши на элемент. Шрифт текста, размер подсказки и её вид в целом зависит от операционной системы и не может быть изменён с помощью стилей. К тому же многих разработчиков не устраивает, что такая подсказка довольно быстро исчезает. Это заставляет искать способы сделать свою всплывающую подсказку, которая была бы оформлена желаемым образом. Конечно, самый универсальный способ заключается в использовании JavaScript, но в некоторых случаях вполне достаточно обойтись и одним CSS.
В качестве примера я выбрал фотографии, при наведении на них курсора мыши показывается название фотографии. Сам вывод текста будем делать при помощи свойства content и брать значение текста из какого-либо атрибута через attr() . К сожалению, content не будет работать желаемым образом в сочетании с img , поэтому фотографии вставляются в элемент
Пример 1. Код HTML
HTML5 IE Cr Op Sa Fx
Переходим к стилю нашей подсказки. Вначале надо сделать, чтобы она вообще появлялась. Для этого воспользуемся псевдоэлементом ::after , к которому добавляем content: attr(data-title) .
Получится, что после содержимого элемента с классом photo будет выводиться текст из атрибута data-title , что нам и требовалось. Но поскольку всплывающая подсказка должна появляться только при наведении на фотографию курсора мыши, добавим ещё псевдокласс :hover .
Остаётся только задать желаемый стиль нашей подсказки, в частности, положение, цвет фона, текста, рамку и др. (пример 2).
Пример 2. Стиль подсказки
HTML5 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки
Положение подсказки не зависит от позиции курсора, она появляется в одном и том же месте при наведении курсора на изображение. Можно сделать, чтобы подсказка выводилась в нижней части фотографии, так она не будет закрывать большую часть картинки. Стиль при этом поменяется незначительно (пример 3).
Пример 3. Вывод подсказки внизу фотографии
HTML5 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Вид всплывающей подсказки
К сожалению, свойство transition , с помощью которого можно сделать анимацию подсказки, не работает с псевдоэлементами. Поэтому придётся довольствоваться резким появлением нашей всплывающей подсказки. Также не будет никакого эффекта в браузере IE8 и младше, эта версия не поддерживает ::after . Впрочем, если заменить этот псевдоэлемент на :after , то можно получить более-менее работающий вариант.
Бывают случаи, когда нужно сделать простую всплывающую подсказку без подключения различных библиотек, нагружающих страницу. Для этого удобно будет воспользоваться data атрибутами, с помощью которых будем хранить текстовую информацию всплывающей подсказки.
data атрибут должен начинаться с «data-» и продолжаться уже любым именем. Например, для хранения текста подсказки используем атрибут data-info=»Мой текст подсказки».
Дата публикации: 2016-10-20
От автора: здравствуйте. Всплывающая подсказка — это небольшой поясняющий текст, который появляется при наведении на какой-то элемент, обычно на картинку. Сегодня мы посмотрим, как можно сделать в html всплывающую подсказку разными способами.
Стандартная подсказка
По умолчанию за вывод поясняющего текста отвечает атрибут title. Его можно указывать разным элементам, но обычно используют только для картинок, чтобы объяснить, что на них изображено.
В одной из прошлых статей я использовал изображение тигра, чтобы показать работу с размерами картинки. Если вы не против, я использую опять это изображение. Итак, для вывода подсказки необходимо всего лишь добавить атрибут title и в нем написать нужный текст.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:
Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.
Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.
Способ на чистом css
Очень интересный способ, который позволяет красиво вывести подсказку для изображения. Html-разметка проста, только изображение нужно заключить в блок-контейнер, которому повесим идентификатор, чтобы позже обратиться к нему в стилях:
Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.
Итак, для начала опишем стили для контейнера. Относительное позиционирование нужно нам потому, что мы будем позиционировать абсолютно блок с поясняющим текстом, чтобы позиционирование происходило относительно родительского блока, а не всей страницы.
Блочно-строчное отображение же помешает блоку (а вместе с ним и блоку с подсказкой, которой мы создадим) растянуться на всю ширину окна. Осталось создать саму подсказку. В css это очень удобно делать с помощью псевдоэлементов. Вот так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Кода много, но ничего сложного тут нет. Селектор #tiger:hover:after означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.
Далее позиционируем элемент абсолютно, задаем произвольно цвет и фон, шрифт, выравнивание, отступы и ширину. В итоге на выходе получается вот что:
Эта подсказка появляется при наведении на картинку, но в отличие от стандартной она делает это резко, а также само появление происходит непосредственно в момент наведения. Плавное появление в данном случае реализовать не получится, потому что для псевдоэлементов плавные переходы не поддерживаются.
Способ 2. Чистый css и плавное появление
Впрочем, совсем немного переписав код можно добиться плавного появления подсказки, причем, опять же, не используя javascript.
Чтобы самостоятельно увидеть 2 эффекта, которые я покажу вам далее, я рекомендую открыть блокнот или любой удобный редактор кода и повторять все за мной. Правда для этого еще нужно подключить стилевой файл, хотя стили можно писать и в html в тегах
Все права защищены © 2019
ИП Рог Виктор Михайлович
ОГРН: 313774621200541
Служба поддержки
Tooltip CSS уроки для начинающих академия
Создание всплывающих подсказок с помощью CSS.
Демонстрация: примеры подсказок
Всплывающая подсказка часто используется для указания дополнительной информации о чем-то, когда пользователь перемещает указатель мыши на элемент:
Базовая подсказка
Создайте подсказку, которая появляется, когда пользователь перемещает указатель мыши на элемент:
Пример
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text — see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div>Hover
over me
<span>Tooltip
text</span>
</div>
Пример объяснено
HTML: Используйте элемент контейнера (например, <div>) и добавьте к нему класс "tooltip"
. Когда пользователь наводит курсор на этот <div>, он покажет текст подсказки.
Текст подсказки помещается внутри встроенного элемента (например, <span>) с class="tooltiptext"
.
CSS: Класс tooltip
использует position:relative
, который необходим для размещения текста подсказки ( position:absolute
). Примечание: Ниже приведены примеры размещения всплывающей подсказки.
Класс tooltiptext
содержит фактический текст подсказки. Он скрыт по умолчанию и будет виден при наведении курсора (см. ниже). Мы также добавили некоторые основные стили к нему: 120пкс ширина, черный цвет фона, белый цвет текста, центрированный текст, и 5px верхней и нижней обивка.
Свойство CSS border-radius
используется для добавления скругленных углов в текст подсказки.
Селектор :hover
используется для отображения текста подсказки, когда пользователь перемещает указатель мыши на <div> с class="tooltip"
.
Размещение всплывающих подсказок
В этом примере подсказка помещается справа ( left:105%
) «парящего» текста (<div>). Также обратите внимание, что top:-5px
используется для размещения его в середине его элемента контейнера.
Мы используем число 5 , поскольку текст подсказки имеет верхний и нижний отступы 5px. Если увеличить его заполнение, также увеличьте значение свойства top
, чтобы убедиться, что он остается в середине (если это то, что вы хотите). То же самое относится, если вы хотите, чтобы подсказка помещается влево.
Подсказка справа
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Result:
Hover over me Tooltip text
Левая подсказка
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Result:
Hover over me Tooltip text
Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, смотрите примеры ниже. Обратите внимание, что мы используем свойство margin-left
со значением минус 60 пикселей. Это необходимо для центрирования всплывающей подсказки над/под текстом, наводимым курсором. Он равен половине ширины подсказки (120/2 = 60).
Верхняя подсказка
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Result:
Hover over me Tooltip text
Нижняя подсказка
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Result:
Hover over me Tooltip text
Стрелки подсказки
Чтобы создать стрелку, которая должна появиться с определенной стороны подсказки, добавьте «пустое» содержимое после подсказки, с классом псевдо-элемента ::after
вместе со свойством content
. Сама стрелка создается с использованием границ. Это сделает всплывающую подсказку похожим на пузырь речи.
В этом примере показано, как добавить стрелку в нижнюю часть подсказки:
Нижняя стрелка
.tooltip .tooltiptext::after {
content: » «;
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Result:
Hover over me Tooltip text
Пример объяснено
Поместите стрелку в подсказку: top: 100%
будет размещать стрелку в нижней части всплывающей подсказки. left: 50%
будет центрировать стрелку.
Примечание: Свойство border-width
определяет размер стрелки. При изменении этого параметра также измените значение margin-left
. Это будет держать стрелку в центре.
border-color
используется для преобразования содержимого в стрелку. Мы установили верхнюю границу черным, а остальные-прозрачными. Если бы все стороны были черные, вы бы в конечном итоге с черной квадратной коробке.
В этом примере демонстрируется добавление стрелки в верхнюю часть всплывающей подсказки. Обратите внимание, что на этот раз мы установили нижний цвет границы:
Верхняя стрелка
.tooltip .tooltiptext::after {
content: » «;
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Result:
Hover over me Tooltip text
В этом примере показано, как добавить стрелку слева от подсказки:
Стрелка влево
.tooltip .tooltiptext::after {
content: » «;
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Result:
Hover over me Tooltip text
В этом примере показано, как добавить стрелку справа от подсказки:
Стрелка вправо
.tooltip .tooltiptext::after {
content: » «;
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Result:
Hover over me Tooltip text
Исчезать в подсказках (анимация)
Если вы хотите, чтобы исчезать в тексте подсказки, когда он должен быть видимым, вы можете использовать CSS transition
свойство вместе с opacity
свойство, и перейти от полностью невидимым до 100% видимых, в число указанных секунд (1 секунды в нашем примере) :
Пример
.tooltip .tooltiptext {opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}
Всплывающее изображение при наведении на ссылку
Доброго времени суток, друзья! Это очередная статья, написанная по просьбе одного из читателей моего блога. Сегодня мы реализуем возможность отображения картинки при наведении курсора мыши на ссылку. Зачем это может быть нужно? Все очень просто, таким способом можно сохранить пространство на сайте и вместе с тем оживить ссылки.
Как известно, реализовать всплывающие картинки можно при помощи jQuery, CSS, а также HTML. В сегодняшней статье я выложу готовый код этого эффекта, а также приведу несколько наглядных примеров. Каждый скрипт довольно простой, создан средствами CSS+HTML. Не стану вас больше томить и приведу готовые решения!
Всплывающая картинка при наведении
<html>
<head>
<title>При наведении на текст, отображается скрытый графический контент</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<style>
.stimylrosta-com-ua-div
{
display: none;
}
a.stimylrosta-com-ua-ssilka:hover+div
{
display: block;
}
</style>
</head>
<body>
<a href=»#»>Смелее, наведи на меня курсор!</a>
<div><img src=»#» data-src=»/mail-images/sallivan.png» alt=»Салли»></div>
</body>
</html>
Давайте я вкратце объясню главные моменты. Дабы вывести всплывающее изображение нужно обратиться к тегу <img> с атрибутом src и после знака равно в кавычках прописать путь к изображению, предварительно закачав его в корневую папку сайта.
Тег <а> с обязательным параметром href отвечает за создание и отображение ссылки (в моем примере это текст).
В случае, если элементы сайта сдвинулись, можно задать изображению ширину и высоту, используя свойство width и heigh. Параметры задаются в пикселях.
Атрибут alt позволяет поисковым механизмам более точно распознать, что изображается на картинке.
Для большей наглядности я выделил ту часть кода, которую вы вероятнее всего захотите изменить.
Всплывающий текст при наведении на ссылку
<html>
<head>
<title>При наведении на текст всплывает текстовая подсказка</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<style>
.stimylrosta-com-ua-div
{
display: none;
}
a.stimylrosta-com-ua-ssilka:hover+div
{
display: block;
}
</style>
</head>
<body>
<a href=»#»>Смелее, наведи на меня курсор!</a>
<div>Здорово! Все получилось:)</div>
</body>
</html>
Как можно увидеть с примера при наведении на текст всплывает текстовая подсказка.
Исчезновение изображения при наведении на ссылку
<html>
<head>
<title>При наведении на текст, картинка исчезает</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<style>
.stimylrosta-com-ua-div
{
display: block;
}
a.stimylrosta-com-ua-ssilka:hover+div
{
display: none;
}
</style>
</head>
<body>
<a href=»#»>Смелее, наведи на меня курсор!</a>
<div><img src=»#» data-src=»/mail-images/sallivan.png» alt=»Салли» title=»Корпорация монстров — Салливан»></div>
</body>
</html>
Для добавления определенного вышеприведенного эффекта достаточно скопировать подходящий вам код и вставить его в текстовый редактор. Таким образом, ссылку со всплывающим/исчезающим изображением можно прописать в любом месте статьи.
Важный момент! Каждый из представленных скриптов не вредит валидности сайта.
Не менее удобной считаю реализацию поставленной задачи путем добавления специального скрипта в файл стилей вашего шаблона, который, как правило, называется style.css.
Всплывающая картинка CSS
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #3d3d3d;
padding: 5px;
left: -1000px;
border: 1px solid white;
visibility: hidden;
color: green;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
Для вывода всплывающего окна при наведении на ссылку, в текст следует вставить следующую ссылку:
<a href=»#»>Ссылка<span>Здесь описание<img src=»/ВАША КАРТИНКА«/></span></a>
Помимо этого ссылку со всплывающей картинкой можно вставить в определенную часть вашего шаблона. Для этого следует внести нижеуказанный код в файл index.php. Это файл, определяющий визуальное расположение элементов сайта.
<style type=»text/css»>
a img {
border:none;
}
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: dreen;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}
#counter {
display:none;
text-align:center;
}
</style>
А вот эту часть кода нужно расположить в том месте, где должна отображаться ссылка:
<a href=»#»>Load<span><img src=»/mail-images/sallivan.png» alt=»sallivan» /><br />Hey! How are you?</span></a>
Данный вариант считается менее приемлемым, так как позволяет в качестве всплывающих слов и символов использовать только латинские буквы. Прописав кириллические знаки на сайте отобразятся кракозябры, что негативным образом скажется на валидности сайта. Именно поэтому в примере ссылки я использовал англоязычные слова.
Код нужно вставить в самом конце сего файла либо перед открывающимся тегом <head>.
Если вы пользуетесь CMS (Joomla, WordPress), то для вставки ссылки можно воспользоваться модулем, отображающим на сайте фрагменты HTML, называемым «HTML-код», предварительно установив используемый текстовый редактор в положение редактирования кода. Этот способ актуален в случае, когда необходимо установить ссылку со всплывающим изображением в определенной модульной позиции вашего сайта.
Надеюсь, статья оказалась вам полезной и теперь вы знаете, как сделать всплывающую картинку.
Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter
Не ленитесь, поделитесь!
Понравилась статья? Угостите админа кофе.
jquery — наведите указатель мыши на текст, чтобы отобразить больше текста?
jquery — наведите указатель мыши на текст, чтобы отобразить больше текста? — Переполнение стекаПрисоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.
Спросил
Просмотрено 16к раз
Как можно навести курсор мыши на определенное слово, чтобы справа было больше слов?
<центр>
Авторские права 2014 г.
Tinyfader.js Выпущено под лицензией Creative Commons License
Jquery-1.5.min.js Двойная лицензия по лицензии MIT или GPL версии 2
Jquery-ui-1.8.9.custom.min.js Двойная лицензия по лицензии MIT или GPL версии 2 < / p>
Выпущено на условиях лицензий MIT, BSD и GPL.
Создан 27 фев.
пользователь33534757311 золотых знаков11 серебряных знаков55 бронзовых знаков
1Очень просто с CSS.Вот демо Fiddle.
HTML:
Мой основной текст Мой скрытый текст!
CSS:
.extra {
дисплей: нет;
}
p: hover .extra {
дисплей: встроенный блок;
}
Создан 27 фев.
Джейсон Джейсон47.11k3737 золотых знаков122122 серебряных знака180180 бронзовых знаков
Вот кое-что, что вы можете найти интересным и полезным, хотя это не совсем то, о чем вы просили. Вы можете добавить к своему элементу атрибут title
, чтобы отображать текст в виде всплывающей подсказки. Вы захотите обвести его, если хотите только одно слово.
Супермен
Скрипка
Создан 27 фев.
Джон Джон6,15322 золотых знака3535 серебряных знаков5656 бронзовых знаков
0css Джейсона — лучший способ…. просто хотел указать, что вы используете слишком много повторяющегося кода CSS, и что лучше НЕ использовать встроенный CSS, но все CSS должны быть в таблице стилей и ссылаться на него в тегах заголовка.
Ваша страница будет загружаться быстрее. Ознакомьтесь с этой статьей: Правила производительности программирования
Создан 27 фев.
петеболдук1,10811 золотой знак1111 серебряных знаков2020 бронзовых знаков
Также вы можете использовать всплывающие подсказки начальной загрузки подробнее здесь.Всплывающие подсказки по загрузке.
$ (function () {
$ ('[data-toggle = "tooltip"]'). tooltip ()
})
наведите сюда, чтобы увидеть больше текста...
Создан 18 ноя.
АбдулАхмад МатинАбдулАхмад Матин93511 золотой знак1414 серебряных знаков2626 бронзовых знаков
по умолчанию
Stack Overflow лучше всего работает с включенным JavaScriptВаша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie Настроить параметры
CSS Подсказка
Создавайте всплывающие подсказки с помощью CSS.
Демонстрация: примеры всплывающих подсказок
Всплывающая подсказка часто используется для указания дополнительной информации о чем-либо, когда пользователь наводит указатель мыши на элемент:
Базовая подсказка
Создать всплывающую подсказку, которая появляется, когда пользователь наводит указатель мыши на элемент:
Пример
/ * Контейнер подсказки * /
.tooltip {
position: relative;
дисплей: встроенный блок;
нижняя граница: 1 пиксель с точками чернить; / * Если вы хотите, чтобы под парящим текстом появлялись точки * /
}
/ * Текст всплывающей подсказки
* /
.всплывающая подсказка .tooltiptext {
видимость: скрыто;
ширина: 120 пикселей;
цвет фона: черный;
цвет: #fff;
выравнивание текста: по центру;
отступ: 5px 0;
радиус границы: 6 пикселей;
/ * Поместите текст всплывающей подсказки - см. Примеры ниже! * /
позиция: абсолютная;
z-индекс: 1;
}
/ * Показать
текст всплывающей подсказки при наведении курсора на контейнер всплывающей подсказки * /
.tooltip: hover
.tooltiptext {
видимость: видимый;
}
Подсказка текст
Объяснение примера
HTML: Используйте элемент контейнера (например,
"всплывающая подсказка"
класс к нему.Когда пользователь наводит курсор на этот Текст всплывающей подсказки помещается внутри встроенного элемента (например, ) с class = "tooltiptext"
.
CSS: Подсказка класса
использует положение : относительный
,
который необходим для позиционирования текста всплывающей подсказки (позиция : абсолютная
). Примечание: См. Ниже примеры размещения всплывающей подсказки.
Класс tooltiptext
содержит фактический текст всплывающей подсказки.это
по умолчанию скрыт и будет отображаться при наведении курсора (см. ниже). Мы также добавили
некоторые основные стили к нему: ширина 120 пикселей, черный цвет фона, белый цвет текста,
текст по центру и отступ 5 пикселей сверху и снизу.
Свойство CSS border-radius
используется для добавления закругленных углов к всплывающей подсказке.
текст.
Селектор : hover
используется для отображения текста всплывающей подсказки, когда пользователь перемещает
наведите указатель мыши на
class = "tooltip"
.Подсказки позиционирования
В этом примере всплывающая подсказка размещается справа ( слева: 105%
) от "hoverable"
текст (
top: -5px
используется для размещения его в середине своего элемента контейнера.
Мы используем число 5 , потому что текст всплывающей подсказки имеет верхнюю и
нижняя обивка
5 пикселей. Если вы увеличите его заполнение, также увеличьте значение свойства top
до
убедитесь, что он остается посередине (если вы этого хотите).Тоже самое
применяется, если вы хотите, чтобы всплывающая подсказка располагалась слева.Подсказка справа
.tooltip .tooltiptext {
top: -5px;
оставил:
105%;
}
Результат:
Наведите надо мной Текст всплывающей подсказки
Попробуй сам "Левая подсказка
.tooltip .tooltiptext {
top: -5px;
верно:
105%;
}
Результат:
Наведите надо мной Текст всплывающей подсказки
Попробуй сам " Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, см. Примеры
ниже.Обратите внимание, что мы используем свойство margin-left
со значением минус 60.
пикселей. Это нужно для того, чтобы центрировать всплывающую подсказку над / под парящим текстом. Установлено
до половины ширины всплывающей подсказки (120/2 = 60).
Верхняя подсказка
.tooltip .tooltiptext {
width: 120px;
внизу: 100%; Осталось
:
50%;
поле слева: -60 пикселей; / * Используем половину ширины
(120/2 = 60), чтобы центрировать подсказку * /
}
Результат:
Наведите надо мной Текст всплывающей подсказки
Попробуй сам "Нижняя подсказка
.всплывающая подсказка .tooltiptext {
width: 120px;
верх: 100%; Осталось
:
50%;
поле слева: -60 пикселей; / * Используем половину ширины
(120/2 = 60), чтобы центрировать подсказку * /
}
Результат:
Наведите надо мной Текст всплывающей подсказки
Попробуй сам "Стрелки всплывающей подсказки
Чтобы создать стрелку, которая должна появляться с определенной стороны всплывающей подсказки, добавьте «пустой»
содержание после
всплывающая подсказка с классом псевдоэлемента :: после
вместе с содержимым
имущество.Сама стрелка создана с помощью границ. Это сделает всплывающую подсказку
похожи на речевой пузырь.
В этом примере показано, как добавить стрелку в нижнюю часть всплывающей подсказки:
Стрелка снизу
.tooltip .tooltiptext :: after {
content: "";
позиция: абсолютная;
верх: 100%;
/ * Внизу всплывающей подсказки * /
left: 50%;
поле слева: -5 пикселей;
ширина границы: 5 пикселей;
стиль границы: сплошной;
цвет границы: черный прозрачный прозрачный прозрачный;
}
Результат:
Наведите надо мной Текст всплывающей подсказки
Попробуй сам "Объяснение примера
Поместите стрелку внутри всплывающей подсказки: вверху: 100%
поместит стрелку в
внизу всплывающей подсказки. слева: 50%
будет центрировать стрелку.
Примечание: Свойство border-width
определяет размер
стрела. Если вы измените это, также измените значение margin-left
на то же самое. Этот
стрелка будет в центре.
Цвет границы
используется для преобразования содержимого в стрелку. Мы устанавливаем
верхняя граница станет черной, а остальная часть - прозрачной. Если бы все стороны были черными, ты
получится черный квадрат.
В этом примере показано, как добавить стрелку в верхнюю часть всплывающей подсказки. Обратите внимание, что на этот раз мы установили цвет нижней границы:
Стрелка вверх
.tooltip .tooltiptext :: after {
content: "";
позиция: абсолютная;
низ: 100%; / * Вверху всплывающей подсказки * /
осталось: 50%;
поле слева: -5 пикселей;
ширина границы: 5 пикселей;
стиль границы: сплошной;
цвет границы: прозрачный прозрачный черный прозрачный;
}
Результат:
Наведите надо мной Текст всплывающей подсказки
Попробуй сам "В этом примере показано, как добавить стрелку слева от всплывающей подсказки:
Стрелка влево
.tooltip .tooltiptext :: after {
content: "";
позиция: абсолютная;
верх: 50%;
справа: 100%; / * Слева от всплывающей подсказки
* /
margin-top: -5px;
ширина границы: 5 пикселей;
стиль границы: сплошной;
цвет границы: прозрачный черный прозрачный прозрачный;
}
Результат:
Наведите надо мной Текст всплывающей подсказки
Попробуй сам "В этом примере показано, как добавить стрелку справа от всплывающей подсказки:
Стрелка вправо
.tooltip .tooltiptext :: after {
content: "";
позиция: абсолютная;
верх: 50%;
осталось: 100%; / * Справа от
всплывающая подсказка * /
margin-top: -5px;
ширина границы: 5 пикселей;
стиль границы: сплошной;
цвет границы: прозрачный прозрачный прозрачный черный;
}
Результат:
Наведите надо мной Текст всплывающей подсказки
Попробуй сам "Появление всплывающих подсказок (анимация)
Если вы хотите, чтобы текст всплывающей подсказки исчезал, когда он вот-вот станет видимым, вы
можно использовать свойство перехода CSS вместе с непрозрачностью
свойство, и перейти от полностью невидимого к 100% видимому за определенное количество секунд.
(1 секунда в нашем примере):
Пример
.tooltip .tooltiptext {opacity: 0;
переход: непрозрачность 1 с;
}
.tooltip: hover
.tooltiptext {
непрозрачность: 1;
}
Как отображать текст, когда пользователь наводит указатель мыши на элемент HTML - Techstacker
В этом сверхскоростном руководстве вы узнаете, как отображать текст краткого описания (например, всплывающую подсказку), когда пользователи наводят курсор на элемент, например изображение или ссылку.
Добавление всплывающей подсказки занимает несколько секунд. Просто используйте атрибут заголовка HTML: заголовок
.
Отображение текста при наведении указателя мыши на элемент
Вот базовый пример изображения кубика Рубика. Наведите указатель мыши на это изображение, и через несколько секунд появится дополнительная информация о кубике Рубика:
Вот разметка HTML для элемента изображения выше:
Допустим, вы хотите отображать всплывающую подсказку, когда пользователи наводят указатель мыши на элемент ссылки / привязки.
Наведите указатель мыши на эту ссылку, чтобы открыть всплывающую подсказку.
Последние статьи
И разметка HTML:
Последние статьи
Вот и все. Вы можете добавить атрибут title
к любому элементу HTML.
Почему полезно показывать текст, когда пользователи наводят курсор мыши на элемент?
Допустим, у вас есть элемент, который может вызвать замешательство у некоторых из-за своей простоты.Примером может служить значок. Большинство людей не могут распознать больше, чем несколько значков, но на экране отображаются буквально тысячи различных значков, только в западном мире.
Просто добавив атрибут title к значку (например, внутри элемента изображения), люди могут получить четкое описание функции значка , где бы оно ни было в вашем пользовательском интерфейсе.
Теперь вы можете подумать про себя, сколько людей знают, что при наведении курсора на элемент иногда открывается дополнительная информация?
Отличный вопрос.Ответ в том, что это зависит от вашей целевой аудитории. Большинство технически подкованных людей интуитивно знают, что наведение курсора + ожидание на 1-2 секунды часто дает дополнительную информацию о предмете.
Но что, если ваша аудитория в основном состоит из людей, не разбирающихся в технологиях, или, возможно, просто людей, которые мало просматривают Интернет?
Что ж, тогда я по умолчанию применяю универсальный совет Люка Вроблевски:
Очевидное всегда побеждает.
Если значок нечеткий или, по крайней мере, непонятный для большого процента людей, то вы либо создаете значок лучше, либо соедините его с кратким описанием.
В любом случае, добавление атрибута title и , конечно, атрибута ALT (для программ чтения с экрана, для слабовидящих) имеет только положительные стороны. Вам не нужно добавлять его ко всему, , но если вы сомневаетесь, вы можете это сделать.
В качестве дополнительного бонуса, по крайней мере, атрибуты ALT также влияют на SEO, по крайней мере косвенно, но , вероятно, также напрямую.
Как так? Что ж, описание ALT подпадает под категорию доступности, которую Google не скрывал, влияет на то, как они оценивают качество вашего веб-сайта, что повлияет на ваш рейтинг SEO.
Что касается атрибута title, то использовалось для воздействия на SEO, но, исходя из моих последних исследований, неясно, действует ли он до сих пор. Но опять же, в использовании атрибута title нет явных недостатков, только положительные стороны.
Альтернативные методы подсказки
Возможно, вам понадобится более настраиваемая версия встроенного атрибута всплывающей подсказки / заголовка HTML. В этом случае вы можете использовать JavaScript и CSS для всплывающих подсказок времени и стиля для различных вариантов использования. Я расскажу об этом полезном навыке в будущих уроках. (это в моем списке для записи!).
Word - Показывать заметки / информацию при наведении курсора мыши на текст
Я знаю два метода; оба включают перепрофилирование
полей , предназначенных для других целей.Поля - это поле гиперссылки и поле AutoTextList. Оба могут давать "всплывающие подсказки" при наведении курсора мыши на них. Обе подсказки могут содержать не более 255 символов. У обоих есть ограничения.
Здесь показаны сами поля. Их можно вставить вручную с помощью Ctrl + F9 (Windows) или Cmd + F9 (Mac).В связанной статье я покажу, как вставить их, используя диалоги Word, а также .
По сути, при создании поля добавляется переключатель \ o для создания всплывающего текста. Недостатком является то, что он добавляет язык «Ctrl + щелчок, чтобы перейти по ссылке» или «Щелкните, чтобы перейти по ссылке». Снимок экрана выше взят из моей надстройки всплывающего текста, которая также просматривает поле «Гиперссылка» в документации. Обратите внимание на синюю линию подчеркивания, обозначающую гиперссылку, и подсказку к Ctrl + щелчок, чтобы перейти по ссылке .
Этот метод более подробно исследуется на сайте MVP Word Лене Фредборг. `Добавить всплывающие подсказки к тексту в Word. Она предоставляет макрос для вставки такой подсказки с затенением для нижележащего текста. Этот макрос также удаляет синее подчеркивание. У нее также есть надстройка, которая предоставляет подсказки длиной более 255 символов (2040 символов). Вот снимок экрана с ее страницы, на котором показан всплывающий текст, созданный с помощью ее бесплатного макроса.
Поля гиперссылок и всплывающий текст конвертируются в формат PDF, в отличие от полей AutoTextList.
Обычно вы добавляете поле в закладки, а затем делаете гиперссылку на эту закладку, но в этом нет необходимости. Поле, показанное выше, не имеет закладки и никуда не ссылается, но по-прежнему работает.
{AutoTextList «Показать текст» \ s NoStyle \ t «Это подсказка»}
Синтаксис: {AUTOTEXTLIST "Буквальный текст" \ s ["Название стиля"] \ t ["Текст подсказки"]}
Выше взят из моего бесплатного всплывающего текста надстройки в Microsoft Word.
Вот как выглядит такая подсказка:
Вот еще один пример поля AutoTextList:
Эта всплывающая подсказка или текст при наведении курсора не содержат запутанных слов о переходе по ссылке. Однако всплывающий текст из поля AutoTextList, не преобразуется в pdf .
Вы не можете просто вводить поля. Фигурные скобки-разделители полей {} - это специальные символы, которые необходимо вводить при создании поля Word.Вы можете использовать диалоговое окно слова, чтобы вставить поле, или используйте Ctrl + F9 (Mac: Cmd + F9), чтобы вставить их. Использование полей в Microsoft Word На многих компьютерах к этим ярлыкам необходимо добавлять клавишу Shift Fn.
Этот ответ был переиздан в виде статьи на сайте ответов Microsoft Word: всплывающий текст (при наведении курсора мыши) в Microsoft Word. Эта статья также включает информацию о создании этих полей с помощью диалогов Word.
Текст и форматирование при наведении курсора | R
Добавить текст при наведении
библиотека (сюжетно)
fig <- plot_ly (type = 'scatter', mode = 'markers')
инжир <- инжир%>%
add_trace (
х = с (1: 5),
y = rnorm (5, среднее = 5),
text = c («Текст A», «Текст B», «Текст C», «Текст D», «Текст E»),
hoverinfo = 'текст',
маркер = список (цвет = 'зеленый'),
showlegend = F
)
Рисунок
Унифицированный режим hovermode
Если вы установите для атрибута hovermode
макета вашей фигуры значение x унифицированный
или y унифицированный
), появится одна метка при наведении, описывающая одну точку на трассу для точек с тем же значением x (или y), что и курсор.
Если несколько точек в заданной трассе существуют в одной и той же координате, только одна получит запись в метке при наведении курсора. На линейном графике ниже мы заставили появиться маркеры, чтобы было понятнее, над чем можно навести курсор:
библиотека (сюжетно)
trace_0 <- rnorm (100, среднее = 5)
trace_1 <- rnorm (100, среднее = 0)
trace_2 <- rnorm (100, среднее = -5)
х <- с (1: 100)
data <- data.frame (x, trace_0, trace_1, trace_2)
fig <- plot_ly (data, x = ~ x, y = ~ trace_0, name = 'trace 0', type = 'scatter', mode = 'lines')
fig <- fig%>% add_trace (y = ~ trace_1, name = 'trace 1', mode = 'lines + markers')
fig <- fig%>% add_trace (y = ~ trace_2, name = 'trace 2', mode = 'markers')
инжир <- инжир%>%
макет (hovermode = "x унифицированный")
Рисунок
Форматировать текст при наведении
библиотека (сюжетно)
fig <- plot_ly (type = 'scatter', mode = 'markers')
инжир <- инжир%>%
add_trace (
х = с (1: 100),
y = rnorm (100, среднее = 5),
маркер = список (цвет = 'зеленый'),
hoverinfo = 'у',
showlegend = F
)
инжир <- инжир%>%
макет(
title = list (text = "Установить форматирование текста при наведении
https://github.com/d3/d3-time-format/blob/master/README.md#locale_format " ,
size = 10),
xaxis = список (zeroline = F),
yaxis = список (hoverformat = '.2f'))
Рисунок
Настройка текста всплывающей подсказки с помощью шаблона наведения
Чтобы настроить всплывающую подсказку на графике, вы можете использовать hovertemplate, который представляет собой строку шаблона, используемую для отображения информации, отображаемой в hoverbox.
Эта строка шаблона может включать переменных,
в формате% {variable}, чисел,
в синтаксисе формата d3 и , дату
в синтаксисе d3-time-fomrat.Hovertemplate настраивает текст всплывающей подсказки по сравнению с текстовым шаблоном, который настраивает текст, отображаемый на вашей диаграмме.
Установите горизонтальное выравнивание текста во всплывающей подсказке с помощью hoverlabel.align.
библиотека (сюжетно)
рис <- plot_ly ()
инжир <- инжир%>%
add_trace (
type = 'разброс',
mode = 'линии + маркеры',
х = с (1,2,3,4,5),
у = с (2,02825,1,63728,6,83839,4,8485,4,73463),
text = c («Текст A», «Текст B», «Текст C», «Текст D», «Текст E»),
hovertemplate = paste (' Цена : $% {y :.2f} ',
'
X :% {x}
',
'% {text} '),
showlegend = FALSE
)
инжир <- инжир%>%
add_trace (
type = 'разброс',
mode = 'линии + маркеры',
х = с (1,2,3,4,5),
у = с (3,02825,2,63728,4,83839,3,8485,1,73463),
hovertemplate = 'Цена:% {y: $. 2f} ',
showlegend = FALSE
)
Рисунок
библиотека (сюжетно)
рис <- plot_ly ()
инжир <- инжир%>%
add_trace (
type = "пирог",
name = "",
значения = c (2, 1, 3, 2.5),
label = c ("R", "Python", "Java Script", "Matlab"),
text = c ("textA", "TextB", "TextC", "TextD"),
hovertemplate = "% {label}:
Популярность:% {percent} % {text}")
Рисунок
Расширенный Hovertemplate
библиотека (сюжетно)
df <- read.csv ('https://raw.githubusercontent.com/plotly/datasets/master/job-automation-probability.csv')
рис <- df%>%
plot_ly (
type = 'разброс',
mode = 'маркеры',
x = ~ вероятность,
y = ~ Среднее.годовая заработная плата,
marker = list (size = ~ numbEmployed, sizeref = 4000, sizemode = 'area'),
цвет = ~ образование,
text = ~ short.occupation,
hovertemplate = вставить (
"% {text}
",
"% {yaxis.title.text}:% {y: $ ,. 0f}
",
"% {xaxis.title.text}:% {x: .0%}
",
"Число занятых:% {marker.size :,}",
« »
)
)
инжир <- инжир%>%
макет (легенда = список (ориентация = 'h', y = -0,3))
Рисунок
Номер ссылки
См. Https: // plotly.com / r / reference / для получения дополнительной информации и опций!
А как насчет Dash?
Dash for R - это среда с открытым исходным кодом для создания аналитических приложений без использования JavaScript, которая тесно интегрирована с библиотекой построения графиков Plotly.
Узнайте, как установить Dash for R, на странице https://dashr.plot.ly/installation.
Повсюду на этой странице, где вы видите fig
, вы можете отобразить тот же рисунок в приложении Dash for R, передав его в аргумент figure
компонента Graph
из встроенного пакета dashCoreComponents
, как это :
библиотека (сюжетно)
рис <- plot_ly ()
# fig <- fig%>% add_trace (...)
# fig <- fig%>% layout (...)
библиотека (тире)
библиотека (dashCoreComponents)
библиотека (dashHtmlComponents)
app <- Dash $ new ()
app $ layout (
htmlDiv (
список(
dccGraph (рисунок = рис)
)
)
)
приложение $ run_server (отладка = ИСТИНА, dev_tools_hot_reload = ЛОЖЬ)
Используйте текст при наведении, чтобы упростить чтение и ввод текста на Mac
Узнайте, как использовать текст при наведении курсора, чтобы упростить чтение и ввод текста на Mac на YouTube, чтобы получить скрытые субтитры и другие возможности.
Стенограмма видео: Привет, это Гэри из MacMost.com. Сегодня давайте посмотрим, как использовать Hover Text на вашем Mac, чтобы текст было легче читать и печатать. MacMost представлен вам благодаря большой группе из более чем 800 сторонников.Перейдите на MacMost.com/patreon. Здесь вы можете узнать больше о кампании Patreon. Присоединяйтесь к нам и получите эксклюзивный контент и скидки на курсы. Таким образом, Hover Text - это специальная функция macOS, которая позволяет вам видеть текст на экране, даже если он очень маленький, а также позволяет вводить текст, даже если шрифт ввода текста очень маленький. Теперь вы найдете это в macOS Big Sur и Catalina, если вы перейдете в Системные настройки, затем в Специальные возможности, а затем оттуда перейдите в Zoom. Теперь опция «Масштаб» - «Включить текст при наведении».Итак, мы включим это. Теперь вы увидите инструкции: удерживайте нажатой клавишу Command, чтобы увидеть текст при наведении курсора. Итак, давайте попробуем. Появление текста при наведении указателя мыши немного странно, потому что вы можете подумать, что наведите курсор на такой текст, а затем удерживайте нажатой клавишу Command. Но на самом деле вы сначала удерживаете нажатой клавишу Command, а затем перемещаете курсор. Итак, я удерживаю клавишу Command, а затем, если я наведу курсор на текст, вы увидите, что я получаю эту увеличенную версию текста. Читать намного легче.Очевидно, он огромен. Если я отпущу клавишу Command, она исчезнет. Поэтому мне нужно удерживать нажатой клавишу Command и перемещать курсор по экрану, чтобы увидеть текст Hover. Теперь здесь есть несколько вариантов. Давайте углубимся в них. Если я нажму «Параметры», я смогу установить размер текста, чтобы уменьшить его. Он не должен быть таким огромным. Я мог изменить шрифт, любой шрифт, который я установил. Вы также можете изменить модификатор с Command на Option или Control, если хотите. Обратите внимание, что на нем написано «Тройное нажатие для блокировки».Итак, давайте попробуем. Если я трижды нажму клавишу Command, появится надпись Hover Text Locked. Теперь куда бы я ни переехал, я всегда буду видеть текст при наведении курсора. Так что мне больше не нужно удерживать клавишу Command, чтобы увидеть это. Легко просто выключить это с помощью трех нажатий на одну и ту же клавишу, и теперь вы вернулись в режим, в котором вам нужно удерживать клавишу Command или любую другую клавишу-модификатор, чтобы увидеть это. Допустим, я смотрю на такую веб-страницу. Если я удерживаю клавишу Command и перемещаюсь, я вижу любой текст под курсором, но намного больше, независимо от размера шрифта ниже.Вы могли видеть, что при перемещении я получаю целый абзац или около того. Но он делает даже больше. Если я просматриваю изображения, он также пытается показать мне что-то там. Так, например, здесь я просто вижу подпись к изображению. Здесь нет подписи, поэтому он дает мне имя файла. Вы могли видеть, что это действительно дает мне дополнительную информацию, включенную в изображение. Вы могли видеть это здесь, когда я обычно перемещаюсь по изображению. Но с включенным Hover Text вы могли видеть, что он показывает мне большую версию.Я также получаю описания кнопок, и иногда они соответствуют тому, что вы обычно получаете. Например, если я наведу сюда курсор, появится небольшой индикатор «Поделиться». Но если я использую Hover Text, вы можете увидеть, что он дает мне Увеличить долю. Здесь написано «Новая вкладка», но здесь вы обычно видите подтекст «Показать обзор вкладки». Но на самом деле я получил более глубокое описание от Hover Text. Здесь я получаю меньше описания. Таким образом, вы не всегда получаете ту же информацию, когда используете Hover Text, которую вы обычно получаете при наведении курсора на кнопку.Теперь давайте посмотрим на другой аспект Hover Text. Это способность видеть набираемый вами текст. Итак, если я перейду в Параметры здесь, я могу увидеть, что здесь у меня есть место для ввода текста, и я могу установить его на что-то вроде «Рядом с текущей линией», «Верхний левый», «Правый», «Нижний левый», «Нижний правый» или «Пользовательское место». Скажем, рядом с текущей линией. Теперь, когда я набираю текст, я действительно вижу, что печатаю. Так что самый простой способ сделать это - включить наведение текста тройным нажатием клавиши-модификатора. Итак, теперь он заблокирован.Теперь, когда я начинаю печатать что-то, что вы могли видеть, я получаю здесь большую область ввода, которая отражает обычный текстовый ввод. Теперь это будет работать в некоторых местах, но не в других. Так, например, если я попытаюсь ввести здесь новый URL-адрес, вы увидите, что он работает там в Safari. Если я попытаюсь использовать здесь поле поиска, я замечаю, что иногда оно появляется, а иногда нет. Так что это своего рода хит или промах в Интернете. Итак, в Pages, когда я начинаю печатать, я действительно вижу большую часть того, что я печатаю.Так что здесь действительно легко увидеть, что именно я печатаю, и, возможно, даже больше сосредоточиться на самих словах, которые я печатаю, а не на просмотре целой стены слов из всего документа. Теперь в Pages вы можете настроить шрифт до любого размера и даже увеличить масштаб. Но вы не можете сделать это в таком приложении, как «Сообщения». Многие люди спрашивают меня, как можно увеличить текст в сообщениях. Но с Hover Text это не обязательно. Вы можете навести курсор на любой фрагмент текста и увидеть его увеличенную версию, а когда вы набираете текст, вы можете увидеть его больше, используя Hover Text.Теперь в параметрах текста при наведении вы также можете установить место ввода текста в обычную точку, вместо того, чтобы закрывать что-то на экране. Так, например, я мог бы сказать «Появиться внизу слева». Так что теперь, когда я что-то печатаю, оно всегда находится внизу слева и не закрывает то, что я хочу видеть в середине экрана. Если вы используете Custom, вы получите какой-то текст, который будет здесь, и вы можете взять здесь левый конец, перетащить его и поместить где-нибудь. Тогда он останется там. Теперь обратите внимание, когда я печатаю с помощью Hover Text, я могу поместить сюда курсор и перемещаться, но я также могу щелкнуть здесь, чтобы разместить курсор.Теперь у вас также есть возможность установить цвета. Таким образом, вы можете установить цвет текста. Вы можете установить цвет точки вставки во время набора текста. Цвет фона текста при наведении, цвет границы и цвет выделения элемента. Так, например, давайте установим черный фон для фона и белый цвет для текста. Теперь, когда я использую Hover Text, вы могли видеть, что это выглядит так. Так что попробуйте Hover Text, если у вас возникнут проблемы с чтением текста или просмотром текста, который вы вводите.Вы можете использовать его где угодно. Вы можете видеть это здесь, когда я перемещаюсь по веб-сайту MacMost. Вы можете использовать его в таких местах, как Центр управления. Вы можете использовать его в строке меню. Это может быть действительно хорошим решением, если у вас иногда возникают проблемы с чтением текста в одном или двух приложениях, но вы действительно не хотите менять весь внешний вид экрана только для того, чтобы приспособить это одно приложение. Или, если вам нужны очки для чтения, но вы обнаружите, что большую часть времени вы можете использовать свой Mac без них, но время от времени появляется слово или какой-то элемент, который трудно увидеть.Как отображать текст над изображением при наведении курсора
Если вы хорошо разбираетесь в Photoshop, вы можете напрямую отображать текст над изображением, настроив изображение таким образом.
Но что, когда вам нужно отображать текст, когда мышь перемещается по изображению.
Этот вид функциональности в основном встречается в новостях, на веб-сайтах, посвященных продуктам, или в блогах: они показывают изображение и заголовок публикации, но когда пользователь наводит указатель мыши на одно из изображений, над изображением появляется краткое описание публикации.
В этом кратком руководстве я покажу, как можно отображать текст над изображением, когда пользователь наводит курсор на изображение, используя только HTML и CSS, без jQuery и JavaScript.
Содержание
- HTML
- CSS
- Демо
- Заключение
1. HTML
Во-первых, начнем с разработки макета HTML.
Создание 3 родительских элементов Заполненный код Чтобы разместить текст поверх Теперь контейнер выровнен для размещения дочернего элемента При наведении курсора на родительский Заполненный код
и
2.CSS
position: relative
для родительского position: absolute
для дочернего элемента внизу: 0
и справа: 0
. Установите видимость : скрытая
и непрозрачность : 0
, чтобы изображение не отображалось в первый раз. Использование свойства transition
для добавления анимации.: видимая
и непрозрачность : 0,7;
. / * Родительский контейнер * /
.content_img {
положение: относительное;
ширина: 200 пикселей;
высота: 200 пикселей;
плыть налево;
маржа справа: 10 пикселей;
} / * Контейнер дочернего текста * /
.content_img div {
позиция: абсолютная;
внизу: 0;
справа: 0;
фон: черный;
цвет белый;
нижнее поле: 5 пикселей;
семейство шрифтов: без засечек;
непрозрачность: 0;
видимость: скрыта;
-webkit-transition: видимость 0 с, непрозрачность 0.5с линейный;
переход: видимость 0 с, непрозрачность 0,5 с линейная;
} / * Наведите указатель мыши на родительский контейнер * /
.