Всплывающая подсказка html: Как сделать всплывающую подсказку на html и css?
Красивая всплывающая подсказка при нажатии
Время чтения: 2 мин.На сайте уже есть несколько уроков по поводу всплывающих подсказок. Ссылки на эти уроки вы можете найти в полной новости. Но в этом уроке мы рассмотрим немного другой вид всплывающих подсказок. Их значительное отличие состоит в том, что они имеют множество функций для настройки. Можно менять текст кнопок, изменять положение подсказок, затемнять или не затемнять страницу при появлении подсказки, а также многие другие настройки.
Похожие уроки про всплывающие подсказки:
Пример можно увидеть здесь:
Посмотреть примерСкачать
Как пользоваться?
HTML часть
Необходимо скачать и подключить библиотеку jQuery(она находится в папке с демо) и guiders-1.3.0.js(сам плагин и стили можно скачать здесь):
1 2 3 | <link rel="stylesheet" type="text/css" href="css/guiders-1. |
Всплывающую подсказку можно привязать к ссылке, кнопке, текстовому полю и т.д. В этом уроке мы будем использовать ссылки. То есть после нажатии на ссылку будет появляться всплывающая подсказка как на изображении ниже:
1 2 3 4 5 6 7 | <html>
<body>
<div>
<a href="#" >Нажми!<a>
</div>
</body>
</html> |
jQuery часть
После того как добавили ссылку, кнопку или любой другой элемент управления, необходимо с помощью jQuery привязать подсказку:
1 2 3 4 5 6 7 8 9 10 11 12 | $('#demo').click(function(){
guiders.createGuider({
attachTo: "#demo",
buttons: [{name: "Закрыть",onclick:guiders.hideAll}],
title: "Нажми здесь чтобы переместиться к следующему элементу",
description: "Подсказки могут быть использованы для перемещения по элементам страницы",
id: "tip",
overlay: true,
position:6,
autoFocus:true
}). |
show();
});Рассмотрим более детально каждое свойство:
- attachTo:
- buttons: — массив объектов кнопок.
- title: — данное свойство отвечает за заголовок всплывающей подсказки.
- description: — подробное описание подсказки.
- overlay: — (необязательно) если значение равно «true», тогда остальная часть страницы затемняется при появлении подсказки.
- position: — (необязательно/обязательно если используется свойство attachTo) задает положение, где появится подсказка. Как в часах, здесь задается положение появления подсказки(всего 12 положений).
- autoFocus: — (необязательно) если желаете чтобы прокрутить окно браузера к тому месту где появилась всплывающая подсказка, тогда нужно установить данное свойство в значение «true».
Вывод
Неплохие подсказки, которые можно применять чтобы более компактно расположить информацию. Либо при регистрации показать всплывающее сообщение чтобы уведомить о чем-то пользователя, и т.д.
Успехов!
Источник: http://www.onextrapixel.com/2014/02/04/creating-guided-product-tours-like-google-facebook/
Оформление всплывающих подсказок — всплывающие подсказки CSS
Оставим ненадолго обучение технологии CSS3 и посмотрим небольшой набор оригинально оформленных всплывающих подсказок для сайта. Ведь всплывающие подсказки могут значительно сократить используемую область на сайте, а точнее место. Их также удобно показывать при регистрации человека на сайте. То есть человек может подвести курсор мыши к определенному слову и ему покажется подсказка. Но вот как же красиво и элегантно оформить эти подсказки мы рассмотрим в этой статье.
Оригинальные примеры оформления всплывающих подсказок смотрите ниже:
Посмотреть примерСкачать
Также хочу обратить ваше внимание на следующие статьи, где также есть всплывающие подсказки:
Посмотрим подробнее | Оформление всплывающих подсказок
HTML часть
Давайте рассмотрим на примере «Блока».
Для начала между тегами <head></head> подключаем файл стилей:
1 | <link rel="stylesheet" type="text/css" href="css/tooltip-box.css" /> |
Где окончание «-box» (например, «-flip» или «-line») это и есть тот файл стилей, который соответствует выбранному эффекту.
Далее, пока что не совсем понятный, код:
1 | <p>... Текст ... <span><span>ключевое слово</span><span><span>... Текст во вслывающем окне ...</span></span></span>... Текст ...</p> |
На место ключевого слова необходимо разместить то слово, при наведении на которое будет появляться всплывающая подсказка.
CSS часть
Хорошо, с HTML разобрались. Но что же находится в CSS?
Опять же посмотрим для примера «Блок»:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
|
tooltip {
display: inline;
position: relative;
z-index: 999;
}
/* Выделение "ключевого слова" */
.tooltip-item {
color: #2fa0ec;
cursor: pointer;
z-index: 100;
position: relative;
display: inline-block;
font-weight: 700;
-webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.tooltip:hover .tooltip-item {
color: #fff;
-webkit-transform: translate3d(0,-0.5em,0);
transform: translate3d(0,-0.5em,0);
}
/* Подсказка */
.tooltip-content {
position: absolute;
z-index: 99;
width: 360px;
left: 50%;
margin-left: -180px;
bottom: -5px;
text-align: left;
background: #2fa0ec;
opacity: 0;
font-size: 0.75em;
line-height: 1.5;
padding: 1.5em;
color: #fff;
border-bottom: 65px solid #2a3035;
cursor: default;
pointer-events: none;
border-radius: 5px;
font-family: 'Indie Flower', cursive;
webkit-transform: translate3d(0,-0.
Самое сложное здесь — это свойство transform. Но если вы изучали уроки по CSS преобразованиям, то ничего сложного для вы здесь не заметите.
Вывод
Еще один набор оригинально оформленных всплывающих подсказок для вашего сайта. Смело используйте их у себя на сайте!
Успехов!
Источник: Оригинал
С Уважением, Юрий Немец
Всплывающая подсказка при наведении — Плагин или скрипт?
Здравствуйте, уважаемые друзья и гости блога Pribylwm.
ru! Прошу прощения, что долго не писал, были некоторые трудности с интернетом — перешел к другому провайдеру на скоростной интернет. И сейчас доволен как слон! Ну да ладно, сейчас не об этом, а о том как делается всплывающая подсказка при наведении на сайте при помощи простенького скрипта и специального плагина для WordPress. А выбирать конечно же Вам, чем пользоваться, скриптом или плагином!
Что такое вообще всплывающая подсказка при наведении на сайте? Это простые текстовые всплывающие подсказки на вашем сайте возникающие, когда посетитель наводит курсор мыши на определенную область на сайте, текст либо картинку.
Для чего нужна всплывающая подсказка при наведении на сайте? Например Вы хотите, чтобы на вашем сайте незнакомые слова и выражения были разъяснены посетителю, но не прямо здесь в тексте статьи, а в другой статье, которая уже содержит данное объяснения незнакомого слова или выражения. Тогда Вы сможете при помощи всплывающей подсказки на сайте отправить посетителя за получением подробного ответа на нужную страницу.
Если проще, то просто подсвечиваете неизвестное ему слово всплывающей подсказкой.
Теперь перейдем к основному моменту и рассмотрим как же именно делается всплывающая подсказка при наведении на сайте …
Всплывающая подсказка при наведении на сайте — Два способа создания!
Первый способ создания всплывающей подсказки на сайте созданном на WordPress — специальный плагин Всплывающие подсказки для WordPress. Скачать этот плагин можно здесь.
Установка данного плагина очень проста. Отправьте скачанную папку с плагином на свой хостинг по известному Вам уже пути в папку содержащую все плагины движка WordPress, а именно (wp-content/plugins).
Затем в вашей админке сайта WordPress активируйте вновь появившийся плагин. Все теперь он готов к работе для создания всплывающих подсказок на вашем сайте. У Вас появится вот такое окошко под редактором записей, когда Вы будете писать свои новые статьи:
всплывающие подсказкиЗдесь все доступно и ясно.
Вставьте в поле нужный Вам текст своей всплывающей подсказки, выберите тип всплывающей подсказки — ссылка или картинка. Если Вы выбираете текстовую ссылку для всплывающей подсказки, то вставьте нужную вам ссылку. Если вами выбрана картинка, то введите путь до нужной картинки.
Также Вы можете на ваше усмотрение изменить HTML и CSS3 вашей всплывающей подсказки изменив некоторые параметры. Экспериментируйте и все у Вас обязательно получится!
Это была всплывающая подсказка при наведении на сайт при помощи плагина для WordPress.
Всплывающая подсказка при наведении на сайт — способ второй
Это использование специального скрипта. Вот его код:
<script type=»text/javascript»>// <
No need to change.
var ie=document.all
var ns6=document.getElementById&&!document.all
function getposOffset(what, offsettype){
var totaloffset=(offsettype==»left»)? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype==»left»)? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function iecompattest(){
return (document.compatMode && document.compatMode!=»BackCompat»)? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge==»rightedge»)? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge==»rightedge»){
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.
contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight } return edgeoffset } function showhint(menucontents, obj, e, tipwidth){ if ((ie||ns6) && document.getElementById(«hintbox»)){ dropmenuobj=document.getElementById(«hintbox») dropmenuobj.innerHTML=menucontents dropmenuobj.style.left=dropmenuobj.style.top=-500 if (tipwidth!=»»){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=tipwidth } dropmenuobj.x=getposOffset(obj, «left») dropmenuobj.y=getposOffset(obj, «top») dropmenuobj.
style.left=dropmenuobj.x-clearbrowseredge(obj, «rightedge»)+obj.offsetWidth+»px» dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, «bottomedge»)+»px» dropmenuobj.style.visibility=»visible» obj.onmouseout=hidetip } } function hidetip(e){ dropmenuobj.style.visibility=»hidden» dropmenuobj.style.left=»-500px» } function createhintbox(){ var divblock=document.createElement(«div») divblock.setAttribute(«id», «hintbox») document.body.appendChild(divblock) } if (window.addEventListener) window.addEventListener(«load», createhintbox, false) else if (window.attachEvent) window.attachEvent(«onload», createhintbox) else if (document.getElementById) window.onload=createhintbox
// ]]></script>
Этот код скрипта для создания всплывающей подсказки на вашем сайте нужно взять и поместить между тегами <head></head> в шапке сайта.
Затем для получения нужного эффекта всплывающей подсказки на вашем сайте, вставьте вот такой коротенький код в то место, где нужно вывести всплывающее окно подсказки:
<a class=»hintanchor» onmouseover=»showhint(‘Здесь пишите свой текст, который будет всплывающим при наведении курсора на объект’, this, event, ‘150px’)» href=»#»>?</a>
Просто измените текст, который в этом коде на свой.
Вместо значка вопроса пишите то, что необходимо Вам. Экспериментируйте и все у Вас обязательно получится!
Вот и все на сегодня. Всем спасибо за внимание! Удачи и благополучия Вам!
4.5 / 5 ( 2 голоса )
Web-разработка • HTML и CSS
Всплывающая подсказка — это некоторая информация, появляющаяся рядом с элементом при наведении курсора мыши. Подсказка может быть добавлена к любому элементу страницы. Создание всплывающей подсказки осуществляется посредством добавления к HTML-элементу атрибута title и вызова для него метода tooltip.
<button title="Текст всплывающей подсказки">
Кнопка с подсказкой
</button>$(document).ready(function() {
$('#btn-tooltip').tooltip();
});
Чтобы было более просто выбрать все элементы на странице, для которых необходимо вызвать метод data-toggle="tooltip".
<a href="#" data-toggle="tooltip" title="Текст всплывающей подсказки">текст ссылки</a> ..... <span data-toggle="tooltip" title="Другой текст подсказки">некоторый текст</span>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
Всплывающая подсказка для не активного элемента (т.е. имеющего класс disabled или атрибут disabled) должна вызываться на его родителе.
<span data-toggle="tooltip" title="Подсказка для элемента, находящимся в состоянии disabled">
<button type="button" disabled>Не активная кнопка</button>
</span>Подсказка слева, сверху, снизу и справа:
<button type="button" data-toggle="tooltip"
data-placement="left" title="Подсказка слева">
Подсказка слева
</button>
<button type="button" data-toggle="tooltip"
data-placement="top" title="Подсказка сверху">
Подсказка сверху
</button>
<button type="button" data-toggle="tooltip"
data-placement="bottom" title="Подсказка снизу">
Подсказка снизу
</button>
<button type="button" data-toggle="tooltip"
data-placement="right" title="Подсказка справа">
Подсказка справа
</button>
Примеры вызова метода tooltip():
| Вызов метода | Описание |
|---|---|
$('#element'). |
Инициализирует для элемента или элементов всплывающие подсказки с указанными параметрами. |
$('#element').tooltip('show') |
Включает отображение всплывающей подсказки у элемента. |
$('#element').tooltip('hide') |
Отключает отображение всплывающей подсказки у элемента. |
$('#element').tooltip('toggle') |
Включает или отключает отображение подсказки у элемента. |
$('#element').tooltip('destroy') |
Убирает всплывающую подсказку у элемента и удаляет её. |
tooltip(options)Поиск: Bootstrap • CSS • HTML • Web-разработка • Верстка • Всплывающие подсказки • Tooltip • Фреймворк
Как создать подсказки при наведении
Узнать, как создать подсказки при наведении с помощью CSS.
Наведите курсор на текст ниже:
СверхуТекст подсказки
СправаТекст подсказки
СнизуТекст подсказки
СлеваТекст подсказки
Редактор кода »
Подсказки при наведении
Шаг 1) Добавить HTML:
Пример
<div>Наведите курсор на меня
<span>Текст подсказки</span>
</div>
Шаг 2) Добавить CSS:
Пример
/* Контейнер подсказок */.
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;
padding: 5px 0;
border-radius: 6px;
/* Расположите текст подсказки */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Исчезают в подсказке */
opacity: 0;
transition: opacity 0.3s;
}
/* Подсказка стрелка */
.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;
}
Совет: Зайдите на наш учебник CSS Подсказки чтобы узнать больше о подсказках.
Совет: Чтобы создать «кликабельные» подсказки, перейдите на наш учебник Как сделать — Всплывающие окна
Совет: Модели также похожи на подсказки. Зайдите на наш учебник Как сделать — Модель чтобы узнать о моделях.
Подсказки · Bootstrap на русском
Вдохновленный отличным навеселе jQuery плагин написанный Jason Frame. Всплывающие подсказки-это обновленная версия, которая не полагаться на изображения, использовать CSS3 для анимации, и сведения-атрибуты для местных Заголовок хранения.
Содержание
Обзор
Что нужно знать при использовании плагин всплывающей подсказки:
- Подсказки полагаться на 3-й партии библиотеки Tether для позиционирования. Необходимо включить tether.min.js до bootstrap.js для того, для подсказок, чтобы работать!
- Подсказки отказаться, по соображениям производительности, так что вы должны инициализировать их самостоятельно.
- Подсказки с нулевой длины названия не отображаются.
- Укажите
container: 'body'чтобы избежать проблем с рендерингом в более сложные компоненты (типа наших групп ввода, групп кнопки и т. д.). - Вызывая подсказки на скрытые элементы не будут работать.
- Подсказки для
.disabledилиdisabledэлементы должны быть вызваны на элемент оболочки. - При срабатывании из гиперссылок, которые охватывают несколько строк, подсказки будут центрироваться. Используйте
white-space: nowrap;на<a>, чтобы избежать этого поведения.
Необходимо включить tether.min.js до bootstrap.js для того, для подсказок, чтобы работать!Получил все это? Отлично, давайте посмотрим, как они работают с некоторыми примерами.
Одним из способов инициализации все подсказки на странице будет выбрать их data-toggle атрибута:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})Примеры
Наведите курсор на ссылки ниже, чтобы посмотреть подсказки:
Статические демо
Доступны четыре варианта: сверху, справа, снизу и выровнен по левому краю.
Интерактивная демо-версия
Наведите курсор на подписи, чтобы увидеть подсказки.
<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>Использование
Плагин всплывающей подсказки генерирует контент и разметки по требованию, а по умолчанию места подсказки после запуска элемента.
Вызвать подсказку через JavaScript:
$('#example').tooltip(options)Разметки
Требуемая разметка для подсказки только data атрибут title на HTML элемент, который вы хотите иметь подсказку. Созданный разметки подсказки достаточно проста, хотя и требует установки (по умолчанию значение top плагином).
Делая подсказки для работы клавиатуры и пользователей ассистивных технологий
Следует только добавить всплывающие подсказки для элементов HTML, которые традиционно клавиатурой и интерактивным (например, ссылки или элементы управления формы). Хотя произвольный HTML-элементы (такие как <span>) может быть сделан фокус на добавление tabindex="0" атрибута, это может Добавить закладку раздражает и смущает останавливается на неинтерактивные элементы для пользователей клавиатуры. Кроме того, большинство технологий, в настоящее время не озвучит подсказки в этой ситуации.
<!-- HTML писать -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Сгенерированной разметке плагин -->
<div role="tooltip">
<div></div>
<div>
Some tooltip text!
</div>
</div>Варианты
Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-, а на data-animation="".
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| animation | boolean | true | Нанесите CSS плавного перехода к подсказке |
| container | string | false | false | Добавляет всплывающую подсказку к конкретному элементу. |
| delay | number | object | 0 | Задержка отображения и скрытия подсказки (мс) — не применяется к ручной запуск Тип Если номер указан, задержка применяется как скрыть/показать Структура объекта: |
| html | boolean | false | Вставить HTML в подсказке. Если задано значение false, в jQuery text метод будет использоваться, чтобы вставить содержание в DOM. Используйте текст, если вы беспокоитесь о xss-атак. |
| placement | string | function | ‘top’ | Как подсказка — сверху | снизу | слева | справа | авто. Когда функция используется для определения размещения, это называется с tooltip DOM узел в качестве первого аргумента и пусковым элемент DOM узле в качестве второго. В |
| selector | string | false | Если имеется селектор, объектов пирог будет передана указанным целям. На практике это используется для включения динамического содержимого HTML для эклеров добавил. Смотрите это и информативный пример. |
| template | string | '<div role="tooltip"><div></div><div></div></div>' | Базовый HTML-для использования при создании всплывающей подсказки. Подсказки
Элемент внешней оболочки должен иметь |
| title | string | element | function | » | По умолчанию название значение, если атрибут Если дана функция, она будет вызвана с его |
| trigger | string | ‘hover focus’ | Как подсказка срабатывает клик | наведение | фокус | руководство. Вы можете пройти несколько триггеров; разделяйте их пробелом. «вручную» не может сочетаться с любой другой триггер. |
| constraints | Array | [] | Множество препятствий — прошел на Tether. Дополнительные сведения см. в разделе Tether’ы ограничение документы. |
| offset | string | ‘0 0’ | Смещение окна относительно своей цели. Дополнительные сведения см. в разделе Tether’ы смещение документы. |
Пример: 
Атрибуты данных для отдельных подсказки
Варианты индивидуальных подсказки также может быть задан с помощью атрибутов данных, как описано выше.
Методы
$().tooltip(options)
Присоединяет обработчик подсказки к коллекции элементов.
.tooltip('show')
Показывает всплывающая подсказка элемента. Возвращается к абоненту до подсказки было показано (т. е. shown.bs.tooltip события). Это считается “ручного” срабатывания подсказке. Подсказки с нулевой длины названия не отображаются.
$('#element'). tooltip('show')
tooltip('show').tooltip('hide')
Скрытие всплывающей подсказки элемента. Возвращает вызывающему перед подсказкой на самом деле был скрытый (т. е. hidden.bs.tooltip события). Это считается “ручного” срабатывания подсказке.
$('#element').tooltip('hide').tooltip('toggle')
Переключает подсказка элемента. Возвращает вызывающей до подсказки было показано или скрыто (т. е. shown.bs.tooltip или hidden.bs.tooltip события). Это считается “ручного” срабатывания подсказке.
$('#element').tooltip('toggle').tooltip('dispose')
Скрывает и уничтожает всплывающей подсказки элемента. Подсказки, что использовать делегирование (которые создаются с помощью selector опция) не может быть индивидуально уничтожен потомок триггерных элементов.
$('#element').tooltip('dispose')События
| Тип События | Описание |
|---|---|
| show.bs.tooltip | Это событие возникает сразу же, когда show вызывается способ экземпляра. |
| shown.bs.tooltip | Это событие запускается, когда подсказка была сделана видимой для пользователя (будет ждать CSS переходы для завершения). |
| hide.bs.tooltip | Это событие сразу же уволили, когда hide метод экземпляра называется. |
| hidden.bs.tooltip | Это событие запускается, когда подсказка закончит быть скрыта от пользователя (будет ждать CSS переходы для завершения). |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// сделать что-то. ..
})
..
})CSS Подсказка
Создавайте всплывающие подсказки с помощью CSS.
Демо: Примеры подсказок
Всплывающая подсказка часто используется для указания дополнительной информации о чем-либо, когда пользователь наводит указатель мыши на элемент:
Базовая подсказка
Создать всплывающую подсказку, которая появляется, когда пользователь наводит курсор мыши на элемент:
Пример
/ * Контейнер всплывающей подсказки * /
.tooltip {
position: relative;
дисплей: встроенный блок;
нижняя граница: 1 пиксель с точками черный; / * Если вы хотите, чтобы под парящим текстом появлялись точки * /
}
/ * Текст всплывающей подсказки
* /
.tooltip .tooltiptext {
видимость: скрыто;
ширина: 120 пикселей;
цвет фона: черный;
цвет: #fff;
выравнивание текста: по центру;
отступ: 5 пикселей 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%;
margin-left: -60 пикселей; / * Используем половину ширины
(120/2 = 60), чтобы центрировать подсказку * /
}
результат:
Наведите надо мной Текст всплывающей подсказки
Попробуй сам »Нижняя подсказка
.всплывающая подсказка .tooltiptext {
width: 120px;
верх: 100%;
осталось:
50%;
margin-left: -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;
}
Tooltip Реализация руководств, управление данными в компоненте Webix Docs
Средний
Всплывающая подсказка отображается над другими компонентами пользовательского интерфейса, что делает ее похожей на окно и всплывающее окно.
Всплывающая подсказка связана с компонентом или его элементом и становится видимой, когда пользователь наводит на него указатель мыши, и исчезает, когда указатель покидает область.
Общие принципы
Вы можете добавить всплывающие подсказки Webix для любого виджета, элемента управления и HTML-элемента внутри или вне представления Webix.
Всплывающие подсказки можно установить несколькими способами:
- true включает всплывающую подсказку по умолчанию, которая отображает значение элемента данных или элемента управления;
- строка шаблона добавляет всплывающую подсказку с текстом, HTML и любыми значениями из элемента данных или конфигурации элемента управления;
- функция шаблона добавляет более расширенную всплывающую подсказку; функция получает объект элемента данных или объект конфигурации элемента управления;
- Объект всплывающей подсказки добавляет всплывающую подсказку и позволяет устанавливать свойства всплывающей подсказки, такие как:
- шаблон - шаблон, заданный как строка или функция, как описано выше;
- dx - координата X относительно указателя мыши;
- dy - координата Y относительно указателя мыши;
- css - класс CSS, применяемый к всплывающей подсказке;
Ниже вы найдете конкретную информацию для каждой группы компонентов и элементов HTML.
Всплывающие подсказки для компонентов данных
Чтобы добавить всплывающую подсказку к компоненту данных (список, представление данных, диаграмма), используйте параметр всплывающей подсказки компонента.
Всплывающая подсказка по умолчанию отображает значение поле элемента данных:
webix.ui ({
view: "список",
подсказка: правда
// ... данные и прочая конфигурация
}); Подсказка может включать текст, а также элементы из набора данных.
webix.ui ({
view: "dataview",
подсказка: " Рейтинг: # рейтинг #
" +
" Голоса: # голосов #"
//...data и другой конфиг
}); Подсказка также может быть определена как функция, которая получает объект элемента данных:
webix.ui ({
view: "dataview",
tooltip: function (obj) {
return " Рейтинг: " + obj.rating + "
" +
« Голоса: » + obj.votes;
}
// ... данные и прочая конфигурация
}); Вы также можете предоставить полный объект конфигурации всплывающей подсказки и указать для него шаблон, смещение мыши и CSS:
webix.ui ({
view: "dataview",
подсказка: {
шаблон: " Рейтинг: # рейтинг #
" +
" Голосов: # голосов #",
dx: 10, // по умолчанию 20
dy: 5 // 0 по умолчанию
}
// ... данные и прочая конфигурация
}); Связанный образец: Шаблон всплывающих подсказок
Подсказка DataTable
DataTable Tooltip определяется аналогичным образом, но имеет свои особенности.
Всплывающая подсказка по умолчанию показывает значение ячейки, над которой в данный момент наведен курсор, но вы можете настроить шаблон подсказки для каждого столбца:
webix.ui ({
view: "datatable",
tooltip: true, // включить всплывающие подсказки для всех столбцов
столбцы: [
{
id: "имя", заголовок: "Имя",
всплывающая подсказка: "Меня зовут # имя #." // настраиваем всплывающую подсказку для определенного столбца
},
{id: "age", заголовок: "Age"}
],
данные:[
{id: 1, имя: "Ann", возраст: 25},
{id: 2, имя: "Tom", возраст: 27}
]
}); Всплывающие подсказки столбца также можно определить как функции, которые получают объект элемента данных:
webix.ui ({
view: "datatable",
подсказка: правда,
столбцы: [
{
id: "имя", заголовок: "Имя",
подсказка: функция (объект) {
return "Меня зовут" + obj.name + ". Я" + obj.age + ".";
}
},
{id: "age", заголовок: "Age", всплывающая подсказка: ""}
]
}); Связанный образец: всплывающие подсказки
Вы можете отменить всплывающие подсказки для некоторых столбцов, установив tooltip: false в их конфигурации:
webix.ui ({
view: "datatable",
подсказка: правда,
столбцы: [
{id: "name", заголовок: "Name"},
{id: "age", header: "Age", tooltip: false} // не будет отображаться
]
}); Вы также можете установить всплывающие подсказки Webix для Datatable:
- заголовок,
- нижний колонтитул,
- спарклайна.
Дополнительные сведения см. Во всплывающей подсказке DataTable.
Всплывающие подсказки для элементов управления
Начиная с Webix 6.2, значки, флажки, кнопки, переключатели, ползунки и т. Д.могут иметь всплывающие подсказки Webix. Всплывающие подсказки могут быть установлены в качестве параметра конфигурации tooltip как:
- логическое значение true , которое покажет значение элемента управления :
webix.ui ({
view: "button", value: "Click me", tooltip: true // показывает "Click me"
}); webix.ui ({
вид: «текст», всплывающая подсказка: «Имя и фамилия»
}); - строка шаблона, которая обращается к объекту конфигурации элемента управления:
webix.ui ({
view: "counter", значение: 75, min: 60, max: 144,
всплывающая подсказка: "# мин. # - # макс. #"
}); - функция, которая получает объект конфигурации элемента управления:
webix.ui ({
представление: "datepicker", значение: new Date (), формат: "% d% M% Y",
tooltip: function (obj) {
вернуть webix.i18n.parseFormatStr (obj.value);
}
}); - объект с конфигурацией всплывающей подсказки, в которой вы можете изменить положение всплывающей подсказки и определить шаблон всплывающей подсказки как строку или функцию:
webix.ui ({
view: "checkbox", значение: 0,
подсказка: {шаблон: "# значение #", dx: 20, dy: -10}
}); Связанный образец: Tooltip :: Controls
Всплывающие подсказки для радио, сегментации и панели вкладок
Каждая радиокнопка, сегмент кнопки и кнопка панели вкладок также могут иметь всплывающие подсказки.
Вы можете включить всплывающие подсказки по умолчанию для этих элементов управления с помощью tooltip: true . Будет показано значение опции для каждой опции:
var data = [
{id: "radio", значение: "Radio", ширина: 150},
{id: "segmented", значение: "Segmented", ширина: 150},
{id: "template", значение: "Template", width: 150}
];
Webix.ui ({
view: "tabbar", options: data, tooltip: true
}); Чтобы настроить всплывающие подсказки, вы можете установить всплывающую подсказку как:
- строка шаблона, которая может отображать простой текст со свойствами параметров:
webix.ui ({
view: "radio", options: data, tooltip: "# value # option"
}); - шаблонная функция, которая получает свойства параметра и должна возвращать строку для отображения:
webix.ui ({
view: "radio", options: data, tooltip: function (obj) {
return obj.value + "option";
}); - объект конфигурации
- с шаблоном, смещением мыши и настройками css:
{
вид: "сегментированный", значение: 1, параметры: данные,
подсказка: {
dx: 40, dy: 40, css: "img",
template: function (obj) {
return obj.value + "
![](/ imgs / image00" + obj.id + ".jpg)
";
}
}
} Связанный образец: Tooltip :: Segmented, tabbar и radio
Всплывающие подсказки для шаблонов
Строка или функция всплывающей подсказки получает объект конфигурации шаблона, например.г .:
webix.ui ({
view: "шаблон",
шаблон: "# значение #",
данные: {id: 1, значение: "Text"},
tooltip: function (obj) {
вернуть obj.data.value;
}
}); Всплывающие подсказки для элементов HTML
Всплывающие подсказкиWebix можно добавлять не только к представлениям Webix, но и к любым элементам HTML.
HTML-областей в представлениях Webix
Вы можете добавлять всплывающие подсказки для любых областей HTML в представлениях Webix. Включите всплывающие подсказки для компонента и добавьте атрибут webix_tooltip с текстом всплывающей подсказки к элементу HTML, e.г .:
{
view: "список",
подсказка: "# название #",
шаблон: "# id #. # title #" +
" ",
данные:[
{id: 1, title: "Искупление Шоушенка", рейтинг: 9,2, рейтинг: 1},
{id: 2, title: "Крестный отец", рейтинг: 9,2, рейтинг: 2}
]
} Если вы хотите отображать всплывающие подсказки только для областей внутри компонента, которые отмечены как webix_tooltip , вам необходимо использовать миксин TooltipControl и добавить «возможность всплывающей подсказки» для всего компонента HTML:
webix.ui ({
id: "шаблон",
template: function () {
return "" +
"Времена года " +
" Four Seasons заполняют Мерило года;
" +
«Четыре сезона есть в сознании человека.
»;
}
});
//component.$view указывает на самый верхний HTML-элемент компонента
webix.TooltipControl.addTooltip ($$ ("шаблон"). $ view); Связанный образец: Tooltip :: HTML Areas
Произвольные элементы HTML
Чтобы добавить всплывающую подсказку к любому элементу HTML, используйте миксин TooltipControl.
Статические всплывающие подсказки
Чтобы добавить всплывающую подсказку со статическим текстом, вызовите метод addTooltip миксина TooltipControl со следующими параметрами:
- идентификатор элемента HTML или самого элемента,
- текст всплывающей подсказки.
webix.TooltipControl.addTooltip («название», «Введите название книги»);
webix.TooltipControl.addTooltip (document.getElementById («автор»), «Введите автора книги»);
Вы также можете добавить всплывающие подсказки для элементов HTML, добавив атрибут "webix_tooltip" с текстом всплывающей подсказки и вызвав метод addTooltip для родительского контейнера:
webix.TooltipControl.addTooltip («жанр»);
, где жанр - это идентификатор такого набора полей:
Динамические подсказки
Вы можете создавать динамические всплывающие подсказки, вызывая метод addTooltip с другим вторым параметром - объектом конфигурации, который будет определять все три стадии жизненного цикла всплывающей подсказки:
- $ tooltipIn - (функция) определяет внешний вид всплывающей подсказки, когда курсор входит в границы элемента HTML;
- $ tooltipMove - (функция) определяет поведение всплывающей подсказки при перемещении курсора над элементом HTML;
- $ tooltipOut - (функция) определяет поведение всплывающей подсказки, когда курсор покидает элемент HTML;
webix.TooltipControl.addTooltip ("аннотация", {
$ tooltipIn: function (node) {
let tooltip = webix.TooltipControl.getTooltip ();
tooltip.define ("шаблон", function () {
return node.value || «Пустое поле»;
});
возвратный узел;
}
}); Связанный пример: Подсказка :: Поддержка HTML
Всплывающие подсказки только для переполнения
Вы можете создать автоматическую всплывающую подсказку для тех узлов или элементов данных, содержимое которых слишком велико и обрезается. В объекте конфигурации компонента данных определите всплывающую подсказку как объект и установите для его свойства overflow значение true :
{
view: "список", // любой компонент данных
подсказка: {
переполнение: правда
}
}
// или для элементов HTML
Webix.TooltipControl.addTooltip ("areaA", {
переполнение: правда
}); Следует обратить внимание на две вещи:
- Требуемый узел / элемент данных должен иметь специальный атрибут webix_tooltip с отображаемым значением. Например, вы можете предоставить шаблон для элементов данных:
// # значение # будет содержанием всплывающей подсказки
шаблон: " # идентификатор #. # значение # " или добавьте атрибут в элемент HTML
- Узел / элемент данных должен быть оформлен так, чтобы не отображать все содержимое e.грамм. как показано ниже:
.text {
переполнение: скрыто; / * содержимое клипов * /
белое пространство: nowrap; / * подавляет перенос строки * /
} Связанный образец: Подсказка: переполнение
Всплывающая подсказка с указанным значением будет отображаться при наведении курсора на соответствующий узел / элемент данных:
Задержка для автоматических подсказок
Вы можете указать задержку, после которой всплывающая подсказка для нужного узла / элемента данных будет отображаться автоматически.
подсказка: {
шаблон: "# значение #",
// появится через 100 мс после наведения курсора на элемент данных
задержка: 100
} Пользовательские подсказки
Также есть всплывающая подсказка. Вы можете инициализировать его и показать / скрыть с помощью Tooltip API
Связанный образец: всплывающая подсказка Webix
Вернуться наверхПланировщик всплывающих подсказок Документы
Для отображения всплывающих подсказок для событий необходимо включить dhtmlxscheduler_tooltip.js один раз на странице.
После этого всплывающие подсказки будут отображаться с настройками по умолчанию.
Связанный образец: всплывающие подсказки
Для настройки всплывающих подсказок у вас есть следующий API:
Методы
- hide () - скрывает всплывающую подсказку
- show (событие, текст) - показывает всплывающую подсказку в месте события браузера с указанным содержимым.Метод принимает два параметра:
- событие - событие браузера
- текст - содержимое всплывающей подсказки, будет добавлено в innerHTML элемента всплывающей подсказки
dhtmlXTooltip.hide ();
dhtmlXTooltip.show (событие, текст);
Свойства конфигурации
- className - имя класса CSS, который будет применяться к всплывающим подсказкам
- timeout_to_display - задержка в миллисекундах перед отображением всплывающей подсказки для события (по умолчанию 50)
- timeout_to_hide - задержка в миллисекундах перед скрытием всплывающей подсказки (по умолчанию 50)
- delta_x - правое (если положительное) смещение позиции курсора (по умолчанию 15)
- delta_y - верхнее (если положительное) смещение позиции курсора (по умолчанию -20)
dhtmlXTooltip.config.className = 'dhtmlXTooltip tooltip';
dhtmlXTooltip.config.timeout_to_display = 50;
dhtmlXTooltip.config.timeout_to_hide = 50;
dhtmlXTooltip.config.delta_x = 15;
dhtmlXTooltip.config.delta_y = -20;
шаблоны
var format = scheduler.date.date_to_str ("% Y-% m-% d% H:% i");
scheduler.templates.tooltip_text = function (начало, конец, событие) {
return " Событие: " + event.text + "
Дата начала: " +
формат (начало) + «
Дата окончания: » + формат (конец);
}; Вернуться наверх
КомпонентTooltip - документация UIkit
С легкостью создайте красивую подсказку.
Чтобы применить этот компонент, добавьте к элементу атрибут data-uk-tooltip . Вам также необходимо добавить атрибут заголовка, значение которого будет представлять текст вашей всплывающей подсказки.
Пример
Наведи меня Наведи меня
Наценка
... Добавьте один из следующих параметров к атрибуту data-uk-tooltip , чтобы настроить выравнивание всплывающей подсказки.
| Атрибут | Описание | Пример |
|---|---|---|
поз: «верх» | Выравнивает всплывающую подсказку по верхнему краю. | Hover me |
поз: «вверху слева» | Выравнивает всплывающую подсказку по левому верхнему краю. | Hover me |
поз: «вверху справа» | Выравнивает всплывающую подсказку по верхнему правому краю. | Hover me |
поз: «снизу» | Выравнивает всплывающую подсказку по нижнему краю. | Hover me |
поз: «нижний левый» | Выравнивает всплывающую подсказку по левому нижнему краю. | Hover me |
поз: «внизу справа» | Выравнивает всплывающую подсказку по нижнему правому краю. | Hover me |
пол .: «левый» | Выравнивает всплывающую подсказку по левому краю. | Hover me |
пол .: «правый» | Выравнивает всплывающую подсказку по правому краю. | Hover me |
Наценка
Это пример того, как установить параметры через атрибут:
data-uk-tooltip = "{pos: 'bottom-left'}" | Опция | Возможное значение | По умолчанию | Описание |
|---|---|---|---|
смещение | целое | 5 | Смещение к исходному элементу |
поз. | строка | 'верх' | Позиция подсказки |
анимация | логический | ложный | Появление всплывающей подсказки |
задержка | целое | 0 | Отображение всплывающей подсказки задержки в мс |
cls | строка | ' | Пользовательский класс для добавления на шоу |
активный класс | строка | 'uk-active' | Переключаемый активный класс |
Класс QToolTip | Виджеты Qt 5.15,1
Класс QToolTip предоставляет всплывающие подсказки (всплывающую справку) для любого виджета. Подробнее ...
| Заголовок: | #include |
| qmake: | QT + = виджеты |
Статические открытые члены
| QFont | font () | ||||||||||||
| void | hideText () | ||||||||||||
| bool | isVisible 18| () | void | setFont (const QFont & font ) | void | setPalette (const QPalette & palette ) | posext , const QString & text , QWidget * w , const QRect & rect ) | void | showText (const QPoint & pos , const QString & text , QWidget = nullptr) | void | showText (const QPoint & pos , const QString & text 9106 4, QWidget * w , const QRect & rect , int msecDisplayTime ) | QString | текст () | |
Подробное описание
Подсказка - это короткий текст, напоминающий пользователю о функции виджета.Он нарисован непосредственно под заданной позицией в характерной цветовой комбинации черного с желтым. Совет может быть любой строкой в формате RTF.
Форматированный текст, отображаемый во всплывающей подсказке, неявно переносится по словам, если иное не указано в
Самый простой и наиболее распространенный способ установить всплывающую подсказку виджета - это вызвать его функцию QWidget :: setToolTip ().
Также можно отображать разные подсказки для разных областей виджета, используя QHelpEvent типа QEvent :: ToolTip.Перехватите событие справки в функции вашего виджета event () и вызовите QToolTip :: showText () с текстом, который вы хотите отобразить. Пример всплывающих подсказок иллюстрирует эту технику.
Если вы вызываете QToolTip :: hideText () или QToolTip :: showText () с пустой строкой, в результате события ToolTip вы также должны вызвать ignore () для этого события, чтобы сообщить, что вы этого не сделаете. хотите запустить какие-либо специальные режимы всплывающей подсказки.
Обратите внимание, что если вы хотите отображать всплывающие подсказки в представлении элемента, архитектура модель / представление предоставляет функциональные возможности для установки всплывающей подсказки элемента; е.g., функция QTableWidgetItem :: setToolTip (). Однако, если вы хотите предоставить настраиваемые всплывающие подсказки в представлении элемента, вы должны перехватить событие справки в функции QAbstractItemView :: viewportEvent () и обработать его самостоятельно.
Цвет и шрифт всплывающей подсказки по умолчанию можно настроить с помощью setPalette () и setFont (). Когда всплывающая подсказка отображается в данный момент, isVisible () возвращает true и text () - текущий видимый текст.
Примечание. Подсказки инструментов используют неактивную цветовую группу QPalette, потому что подсказки не являются активными окнами.
См. Также QWidget :: toolTip, QAction :: toolTip и Пример подсказок.
Документация по функциям-членам
[статические] QFont QToolTip :: font ()
Возвращает шрифт, используемый для отображения всплывающих подсказок.
Эта функция была введена в Qt 4.2.
См. Также setFont ().
[статические] void QToolTip :: hideText ()
Скрывает наконечник инструмента. Это то же самое, что и вызов showText () с пустой строкой.
Эта функция была введена в Qt 4.2.
См. Также showText ().
[статические] bool QToolTip :: isVisible ()
Возвращает true , если эта подсказка отображается в данный момент.
Эта функция была введена в Qt 4.4.
См. Также showText ().
[статические] QPalette QToolTip :: palette ()
Возвращает палитру, используемую для визуализации всплывающих подсказок.
Примечание. Подсказки инструментов используют неактивную цветовую группу QPalette, потому что подсказки не являются активными окнами.
См. Также setPalette ().
[статические] void QToolTip :: setFont (const QFont и шрифт )
Задает шрифт , используемый для отображения всплывающих подсказок.
Эта функция была введена в Qt 4.2.
См. Также шрифт ().
[статические] void QToolTip :: setPalette (const QPalette и палитра )
Задает палитру , используемую для визуализации всплывающих подсказок.
Примечание. Подсказки инструментов используют неактивную цветовую группу QPalette, потому что подсказки не являются активными окнами.
Эта функция была введена в Qt 4.2.
См. Также палитру ().
[статические] void QToolTip :: showText (const QPoint & pos , const QString & text , QWidget * w , const QRect & rect )
Показывает текст как всплывающую подсказку с глобальной позицией поз. в качестве точки интереса. Кончик инструмента будет показан со смещением для конкретной платформы от этой точки интереса.
Если вы укажете непустой прямоугольник, подсказка будет скрыта, как только вы переместите курсор из этой области.
Прямоугольник находится в координатах виджета, который вы указали как w . Если прямоугольник не пуст, необходимо указать виджет. В противном случае этот аргумент может быть nullptr , но он используется для определения соответствующего экрана в системах с несколькими головками.
Если текст пуст, всплывающая подсказка скрыта. Если текст такой же, как в текущей всплывающей подсказке, подсказка переместится на , а не на .Вы можете принудительно переместить наконечник, сначала скрыв наконечник пустым текстом, а затем показывая новый наконечник в новом месте.
[статические] void QToolTip :: showText (const QPoint & pos , const QString & text , QWidget * w = nullptr)
Это перегруженная функция.
Это аналогично вызову QToolTip :: showText ( pos , text , w , QRect ())
[статические] void QToolTip :: showText (const QPoint & pos , const QString & text , QWidget * w , const QRect & rect , int msecDisplayTime )
Это перегруженная функция.
Это похоже на QToolTip :: showText ( pos , text , w , rect ), но с дополнительным параметром msecDisplayTime , который указывает, как долго будет отображаться всплывающая подсказка в миллисекундах.
Эта функция была введена в Qt 5.2.
[статические] QString QToolTip :: text ()
Возвращает текст всплывающей подсказки, если всплывающая подсказка отображается, или пустую строку, если всплывающая подсказка не отображается.
Эта функция была представлена в Qt 4.4.
© 2020 Компания Qt Company Ltd. Включенная сюда документация является собственностью их владельцы. Представленная здесь документация лицензирована в соответствии с условиями лицензии GNU Free Documentation License версии 1.3, опубликованной Free Software Foundation. Qt и соответствующие логотипы являются товарными знаками компании Qt Company Ltd. в Финляндии и / или других странах по всему миру. Все остальные товарные знаки являются собственностью их владельцев.
Создание всплывающих подсказок с использованием атрибута заголовка HTML
Создание всплывающих подсказок с использованием атрибута заголовка HTML
Изображения уже давно поддерживают атрибут alt, который отображает текстовую подсказку при наведении на нее мыши.
Это нормально и даже здорово, но почему изображения должны получать все слава? Разве другие элементы внутри документа не должны иметь всплывающая подсказка, например, текстовая ссылка или элемент формы? Разве это не было бы довольно круто, не говоря уже о критическом значении в руководствах с ограниченными такие возможности КПК, как навигация по сайту и его различным элементам? Что ж, начиная с HTML 4, понятие атрибута alt для изображений было расширен до всех элементов на странице.
Название атрибут
Идея в том, что HTML 4 поддерживает атрибут title, который может быть вставлен в любой HTML-тег. Эффективная вставка этого атрибута дает элементу всплывающую подсказку, которая появляется при наведении на него мыши. Находятся вы подготовили всплывающую подсказку для текстовой ссылки? Вот и:
title="Free DHTML и JavaScripts" > Dynamic Drive
Динамический привод
Атрибут title поддерживается во всех современных веб-браузерах, и может применяться практически к любому элемент, подпадающий под тег
.Посмотрим еще парочку примеры:<форма> title = "Введите здесь свой адрес электронной почты" >
Набор JavaScript
Набор JavaScript
Сценарии атрибут заголовка
Для большинства из вас просто знание того, как использовать заголовок атрибут, вероятно, достаточно хорош, но на всякий случай JavaScript делает предоставить вам способ программного доступа к атрибуту title (в ваши скрипты) и динамически изменять его значение.
