Как изменить стиль /css всплывающей подсказки?

82
10

в первую очередь это называется подсказкой или я о чем-то другом?

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

http://www.tiikoni.com/tis/view/?id=1fb09eb

вот какой код:

HTML:

<label for="password">Password </label> <input type="password" id="pword" title="Password must be more than 6 characters long" ><br>

ЯШ:

<script>
$(function() {
$( document ).tooltip({
tooltipClass: "passwordTooltip"});
});
</script>

CSS:

[title]:after{
background: #333;
}

[title]:hover:after{
background: #333;
}

спросил(а) 2015-09-22T17:14:00+03:00 5 лет, 1 месяц назад
1
Решение
58

Мне кажется, вы пытаетесь создать всплывающие заголовки по умолчанию с помощью некоторого кода подсказки jQueryUI? Если вы это сделаете, вы должны включить исходные файлы jQueryUI:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Теперь вы можете добавить класс .tooltip (или использовать любой другой вид селектора) для тех элементов, которые вы хотите иметь в стиле подсказки для:

<input type="password" id="pword" class="tooltip" title="Password must be more than 6 characters long">
$('.tooltip').tooltip();

jQueryUI автоматически захватит title каждого элемента и добавит его в содержание стилизованной подсказки. Если вы хотите изменить стиль всплывающей подсказки, просто создайте класс CSS и выполните инициализацию, как указано выше:

.passwordTooltip {
background: #333;
color: #fff;
}
$('.tooltip').tooltip({
tooltipClass: "passwordTooltip"
});

demo → https://jsfiddle.net/fsr9d7Le/

ответил(а) 2015-09-22T17:44:00+03:00 5 лет, 1 месяц назад
59

Здесь небольшой скрипт VanillaJS для добавления поддержки пользовательского стиля всплывающей подсказки. Он использует делегирование делегирования, поэтому динамически добавленные элементы с атрибутом title должны быть вычеркнуты и отображены правильно.


(function() {
"use strict";

var tooltipDelay = 500;

document.registerElement("style-tip");
var timer = null;
document.body.addEventListener("mouseout", function() {
window.clearTimeout(timer);
});
document.body.addEventListener("mousemove", function(e) {
var el = e.target;
if (el != document.body && (el.hasAttribute("title") || el.hasAttribute("data-styletip"))) {

if (el.title) {
el["tt-title"] = el.title;
el["tt-show"] = function(pos) {
var tip = document.createElement("style-tip");
if (el.hasAttribute("styletip-class")) {
tip.className = el.getAttribute("styletip-class");
}
tip.innerText = el["tt-title"];
tip.style.zIndex = 9e9;
tip.style.pointerEvents = "none";
tip.style.position = "absolute";
tip.style.left = pos.x + "px";
tip.style.top = pos.y + "px";
document.body.appendChild(tip);
el["tt-tip"] = tip;
this.addEventListener("mouseout", el["tt-destroy"]);
};
el["tt-destroy"] = function() {
if (el["tt-tip"]) {
document.body.removeChild(el["tt-tip"]);
delete el["tt-tip"];
}
};
el.removeAttribute("title");
el.setAttribute("data-styletip", true);
}

clearTimeout(timer);
timer = window.setTimeout(function() {
el["tt-destroy"]();
el["tt-show"]({
x: e.pageX,
y: e.pageY
});
}, tooltipDelay);
}
});

})();

/* These styles get pretty close to the default Windows 7 tooltips */

style-tip {
font: 0.8em sans-serif;
background: linear-gradient(#fff, #eee);
color: rgba(0, 0, 0, 0.8);
border-radius: 2px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.5);
padding: 3px 5px;
}

style-tip.red {
background: linear-gradient(#fdd, #faa)
}

style-tip.op-default {
background: #333;
color: #eee;
}

<p title="Normal tooltip
With a linebreak!">Normal tooltip</p>
<p title="A red tooltip." styletip-class="red">Red tooltip</p>

<input type="password" id="pword" title="Password must be more than 6 characters long" placeholder="Input tooltip" styletip-class="op-default">

Это должно работать как скрипт, который "просто работает".

ответил(а) 2015-09-22T18:15:00+03:00 5 лет, 1 месяц назад
41

Вы можете использовать стикер My tool tool...

Стиль-my-tooltips Плагин jQuery

Простой в использовании и даже вы можете его настроить.

ответил(а) 2015-09-22T20:17:00+03:00 5 лет, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема