Можно ли отформатировать HTML-подсказку (атрибут заголовка)? [дубликат]

попробуйте использовать коды сущностей, такие как 
 для CR,
 для LF, и 	 на вкладке.

например:

<div title="1)&#009;A&#013;&#010;2)&#009;B">Hover Me</div>

кажется, вы можете использовать css и трюк (без javascript) для этого:

http://davidwalsh.name/css-tooltips

http://www.menucool.com/tooltip/css-tooltip

http://sixrevisions.com/css/css-only-tooltips/

http://csstooltip.com

нет, это невозможно, браузеры имеют свои собственные способы реализации всплывающей подсказки. Все, что вы можете сделать, это создать некоторый div, который ведет себя как подсказка HTML (в основном это просто "показать при наведении") с Javascript, а затем стиль его так, как вы хотите.

при этом вам не придется беспокоиться о масштабировании браузера, так как текст внутри подсказки div является фактическим HTML, он будет масштабироваться соответственно.

смотрите у Джонатана 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

плюсы:

• вам не нужно ничего конвертировать. Просто напишите свой обычный HTML с собственными атрибутами заголовка.
• вы можете использовать HTML-теги и встроенный стиль в подсказках заголовка. (См. пример с целой таблицей HTML в названии с его собственным стилем)

плюсы:

• это javascript
• не тестируется на каждом существующем браузере, но отлично работает с последними версиями Chrome, FF, IE и Opera

вероятно, он может быть написан более элегантно и может иметь несколько строк, которые не нужны.

кроме того, фрагмент кода stackoverflow thingy не может правильно разобрать HTML-код, поэтому проверьте его на ссылке jsfiddle, которую я предоставил.

Я знаю, это старый пост, но я хотел бы добавить мой ответ на будущее. Я использую jQuery и css для стилизации подсказок: самый простой-tooltip-and-image-preview-using-jquery (для демонстрации:http://cssglobe.com/lab/tooltip/02/) На моих статических сайтах это просто отлично работало. Однако во время перехода на Wordpress он остановился. Мое решение было изменить теги, как <br> and <span> в: <br> and <span> Это работает для меня.

в подсказке bootstrap просто используйте data-html= "true"