Можно ли форматировать HTML-подсказку?
например. У меня есть DIV с атрибутом title= "foo!". Когда у меня размер текста моего браузера увеличен или уменьшен, размер текста всплывающей подсказки остается неизменным. Есть ли способ сделать масштаб шрифта всплывающей подсказки с настройкой браузера?
Нет. Но есть и другие варианты: Overlib и jQuery, которые позволяют вам эту свободу.
Лично я предлагаю jQuery в качестве маршрута. Он обычно очень ненавязчив и не требует дополнительной настройки разметки вашего сайта (за исключением добавления тега jquery script в ваш <head> ).
Попробуйте использовать коды объектов, такие как 
 для CR, 
 для LF и 	 для TAB.
Например:
<div title="1)	A
2)	B">Hover Me</div>Кажется, вы можете использовать css и трюк (без javascript) для этого:
http://davidwalsh.name/css-tooltips
http://www.menucool.com/tooltip/css-tooltip
Нет, это невозможно, браузеры имеют собственные способы реализации всплывающей подсказки. Все, что вы можете сделать, это создать некоторый div, который ведет себя как HTML-подсказка (в основном это просто "показывать при наведении" ) с помощью Javascript, а затем нарисуйте его так, как вы хотите.
При этом вам не придется беспокоиться о масштабировании или удалении браузера, поскольку текст внутри div tooltip является фактическим HTML, он будет масштабироваться соответствующим образом.
См. Jonathan post для получения хорошего ресурса.
Лучше поздно, чем никогда, они всегда говорят.
Обычно я использую jQuery для решения такой ситуации. Однако при работе на сайте для клиента, которому требовалось решение без javascript, я придумал следующее:
<div class="hover-container">
<div class="hover-content">
<p>Content with<br />
normal formatting</p>
</div>
</div>
Используя следующий css, вы получите ту же ситуацию, что и с заголовком:
.hover-container {
position: relative;
}
.hover-content {
position: absolute;
bottom: -10px;
right: 10px;
display: none;
}
.hover-container:hover .hover-content {
display: block;
}
Это дает вам возможность стилизовать его в соответствии с вашими потребностями, и он работает во всех браузерах. Даже те, где javascript отключен.
Mootools также имеет класс "Советы", доступный в их "более построителе".
Это невозможно. Но вы можете использовать некоторые javascript-библиотеки для создания такой всплывающей подсказки, например. http://www.taggify.net/
Не уверен, что он работает со всеми браузерами или сторонними инструментами, но у меня был успех, просто указав "\n" в подсказках для новой строки, работая с dhtmlx, по крайней мере, в ie11, firefox и chrome
for (var key in oPendingData) {
var obj = oPendingData[key];
this.cells(sRowID, nColInd).cell.title += "\n" + obj["ChangeUser"] + ": " + obj[sCol];
}
Я написал эту небольшую функцию javascript, которая преобразует все ваши родные заголовки в стилизованные узлы: http://jsfiddle.net/BurakUeda/g8r8L4vt/1/
mo_title = null;
mo_element = null;
document.onmousemove = function (e) {
var event = e || window.event;
var current_title;
var moposx = e.pageX; // current
var moposy = e.pageY; // mouse positions
var tooltips = document.getElementById("tooltips"); // element for displaying stylized tooltips (div, span etc.)
var current_element = event.target || event.srcElement; // the element we're currently hovering
if (current_element == mo_element) return; // we're still hovering the same element, so ignore
if(current_element.title){
current_title = current_element.title;
} else {
current_title = "-_-_-"; // if current element has no title,
current_element.title = "-_-_-"; // set it to some odd string that you will never use for a title
}
if(mo_element == null){ // this is our first element
mo_element = current_element;
mo_title = current_title;
}
if(mo_title) mo_element.title = mo_title; // restore the title of the previous element
mo_element = current_element; // set current values
mo_title = current_title; // as default
if(mo_element.title){
var mo_current_title = mo_element.title; // save the element title
mo_element.title = ""; // set it to none so it won't show over our stylized tooltip
if(mo_current_title == "-_-_-"){ // if the title is fake, don't display it
tooltips.style.display = "none";
tooltips.style.left = "0px";
tooltips.style.left = "0px";
tooltips.innerHTML = "";
} else {
tooltips.style.display = "inline-block";
tooltips.style.left = (moposx + 10) + "px";
tooltips.style.top = (moposy + 10) + "px";
tooltips.innerHTML = mo_current_title;
}
}
};#tooltips {
display: none;
position: absolute;
left 0;
top: 0;
color: white;
background-color: darkorange;
box-shadow: black 2px 2px 2px;
padding: 5px;
border-radius:5px;
}
#buttoncontainer{
border: 1px black solid;
padding: 10px;
margin: 5px;
}<div id="tooltips"></div>
<div>
<div title="DIV #1">Division 1</div>
<div id="buttoncontainer" title="Button container">
<button title="Button with title"> Button #1 </button>
<button> Button w/o title </button>
<button title="
<table border='1' cellpadding='4' cellspacing='0'>
<tr>
<td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #1</td>
<td style='text-decoration:underline; color:RoyalBlue; font-style: italic; font-size: 18px'>Description 1</td>
</tr>
<tr>
<td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #2</td>
<td style='text-decoration:overline; color:RoyalBlue; font-weight:bold; font-size: 14px'>Description 1</td>
</tr>
<tr>
<td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #3</td>
<td style='text-decoration:line-through; color:RoyalBlue; font-style: italic; font-size: 12px'>Description 1</td>
</tr>
</table>
"> Button title containing HTML </button>
</div>
</divЯ знаю, что это старый пост, но я хотел бы добавить свой ответ для дальнейшего использования.
Я использую jQuery и css для создания своих всплывающих подсказок: easyiest-tooltip-and-image-preview-using-jquery
(для демонстрации: http://cssglobe.com/lab/tooltip/02/)
На моих статических сайтах это просто отлично работало. Однако во время перехода на Wordpress он остановился. Моим решением было изменить теги, такие как <br> and <span>, на это: <br> and <span>
Это работает для меня.
В всплывающей подсказке bootstrap просто используйте data-html = "true"