هل من الممكن تنسيق HTML تلميح (title)?[مكررة]

https://stackoverflow.com/questions/484137

html
tooltip

20-08-2019
|

سؤال

هذا السؤال سبق الجواب هنا:

كيفية تغيير نمط سمة العنوان داخل علامة مرساة? 10 إجابات

هل من الممكن تنسيق HTML تلميح?

E. g.لدي شعبة مع السمة title="فو!".عندما يكون حجم النص من المتصفح التكبير أو التصغير في حجم نص تلميح الأدوات لا تزال دون تغيير.هل هناك طريقة لجعل تلميح نطاق الخط مع المتصفح الإعداد ؟

المحلول

لا.ولكن هناك خيارات أخرى هناك مثل Overlib, ، مسج التي تسمح لك هذه الحرية.

jTip : http://www.codylindley.com/blogstuff/js/jtip/
مسج تلميح : https://jqueryui.com/tooltip/

شخصيا, وأود أن أقترح مسج مثل الطريق لاتخاذ.انها عادة ما تكون مزعجة للغاية و لا يتطلب أي إعدادات إضافية في العلامات من موقع الويب الخاص بك (باستثناء إضافة مسج النصي الوسم في <head>).

نصائح أخرى

حاول استخدام الكيان رموز مثل  بالنسبة CR ، 
 بالنسبة لو ، 	 على علامة التبويب.

على سبيل المثال:

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

يبدو أنه يمكنك استخدام css و خدعة (لا جافا سكريبت) لفعل ذلك:

http://davidwalsh.name/css-tooltips

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

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

http://csstooltip.com

متأخرا أفضل من أبدا, دائما يقولون.

عادة كنت تستخدم مسج لحل مثل هذه الحالة.ومع ذلك ، عند العمل على موقع العميل الذي يتطلب جافا سكريبت أقل الحل ، خطرت التالية:

<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;
}

هذا يعطيك خيار نمط وفقا لاحتياجاتك وكذلك يعمل في جميع المتصفحات.حتى تلك التي تم تعطيل جافا سكريبت.

الايجابيات:

لديك الكثير من التأثير على التصميم
يعمل في (تقريبا) جميع المتصفحات

سلبيات:

من الصعب أن موقف تلميح الأدوات

لا, هذا غير ممكن ، المتصفحات الخاصة بهم سبل تنفيذ تلميح الأدوات.كل ما يمكنك القيام به هو خلق بعض div أن يتصرف مثل HTML تلميح (في الغالب انها فقط تظهر على تحوم') مع جافا سكريبت ، ثم أسلوب بالطريقة التي تريدها.

مع هذا, لم يكن لديك ما يدعو للقلق المتصفح التكبير أو التصغير ، لأن النص داخل تلميح الأدوات div فعلية HTML ، فإنه الحجم تبعا لذلك.

يرى جوناثان بعد عن بعض الموارد.

Mootools أيضا لطيفة 'نصائح' الفئة متوفرة في أكثر منشئ'.

غير متأكد ما اذا كان يعمل مع جميع المتصفحات أو 3rd الطرف أدوات, ولكن كان لي النجاح فقط تحديد " " في تلميحات عن السطر يعمل مع dhtmlx على الأقل في ie11, firefox و chrome

for (var key in oPendingData) {
    var obj = oPendingData[key];
    this.cells(sRowID, nColInd).cell.title += "\n" + obj["ChangeUser"] + ": " + obj[sCol];
}

كتبت هذه الصغيرة وظيفة جافا سكريبت الذي يقوم بتحويل كل من الأم العنوان تلميحات إلى منمنمة العقد: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 في العنوان مع أنها تملك التصميم)

سلبيات:

إنه جافا سكريبت
لم تختبر على كل متصفح في الوجود ، ولكن يعمل بشكل جيد مع أحدث إصدارات كروم ، و و ، أي و أوبرا

ربما يمكن كتابة أكثر أناقة و قد يكون عدد قليل من الخطوط التي لا لزوم لها.

أيضا ، ستاكوفيرفلوو مقتطف الشفرة شئ لا يمكن تحليل الكود بشكل صحيح, حتى التحقق من ذلك على jsfiddle رابط قدمت.

أعرف أن هذا هو آخر العمر ولكن أود أن أضيف جوابي للرجوع إليها في المستقبل.يمكنني استخدام jQuery و css إلى نمط بلدي تلميحات:أسهل-تلميح-and-image-معاينة-باستخدام-مسج (على التجريبي: http://cssglobe.com/lab/tooltip/02/) على مواقع ثابتة هذا فقط عملت كبيرة.ومع ذلك, خلال الهجرة إلى وورد توقف.الحل هو تغيير العلامات مثل <br> and <span> في هذا: <br> and <span> هذا يعمل بالنسبة لي.

في التمهيد تلميح فقط استخدام البيانات html="true"

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow