[Javascript] كيفية إضافة تلميح أداة إلى div


Answers

يمكن أن يتم ذلك باستخدام CSS فقط ، ولا توجد javascript على الإطلاق : تشغيل العرض التوضيحي

  1. تطبيق سمة HTML مخصصة ، على سبيل المثال. tooltip="bla bla" إلى الكائن الخاص بك (div أو أيا كان):

    <div tooltip="bla bla">
        something here
    </div>
    
  2. حدد :before pseudoelement لكل كائن [tooltip] شفافًا ومتموضعًا تمامًا وعلامة tooltip="" كمحتوى:

    [tooltip]:before {            
        position : absolute;
         content : attr(tooltip);
         opacity : 0;
    }
    
  3. تعريف :hover:before تحويم حالة كل [tooltip] لجعله مرئيًا:

    [tooltip]:hover:before {        
        opacity : 1;
    }
    
  4. قم بتطبيق الأنماط الخاصة بك (اللون ، الحجم ، الموضع ، إلخ) على كائن تلميح الأدوات ؛ نهاية القصة.

في العرض التوضيحي قمت بتعريف قاعدة أخرى لتحديد ما إذا كان تلميح الأدوات يجب أن يختفي عند التمرير فوقه ولكن خارج الأصل ، مع سمة مخصصة أخرى ، و tooltip-persistent ، وقاعدة بسيطة:

[tooltip]:not([tooltip-persistent]):before {
    pointer-events: none;
}

ملاحظة 1: تغطية المستعرض كبيرة للغاية ، ولكن ضع في اعتبارك استخدام javascript الاحتياطية (إذا لزم الأمر) لـ IE القديم.

ملاحظة 2: قد يكون إضافة تحسين جزءًا صغيرًا من javascript لحساب موضع الماوس وإضافته إلى العناصر الزائفة ، عن طريق تغيير فئة مطبقة عليه.

Question

لدي علامة div على النحو التالي:

<html>
    <head></head>
    <body>
        <div>
            <label>Name</label>
            <input type="text"/>
        </div>
    </body>
</html>

الآن أريد javascript بسيطًا لعرض تلميح الأداة: تحريك div. هل يمكن لاحد مساعدتى من فضلكم؟ يجب أن يحتوي تلميح الأدوات أيضًا على تأثير للداخل / الخارج.




الحل الوحيد لـ CSS3 يمكن أن يكون:

CSS3:

div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left:  0; right: 0; z-index: 1000;}

HTML5:

<div style="background: yellow;">
    <div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />
    </div>
</div>

يمكنك بعد ذلك إنشاء div tooltip-2 بالطريقة نفسها ... يمكنك بالطبع أيضًا استخدام سمة title بدلاً من سمة data .




إليك تطبيق CSS 3 خالص (مع JS اختياري)

الشيء الوحيد الذي عليك القيام به هو تعيين سمة على أي div تسمى "tooltip data" ، وسيتم عرض هذا النص بجانبه عند التمرير فوقه.

لقد قمت بتضمين بعض JavaScript الاختياري الذي سيؤدي إلى عرض تلميح الأدوات بالقرب من المؤشر. إذا لم تكن بحاجة إلى هذه الميزة ، فيمكنك تجاهل جزء جافا سكريبت Javascript من هذا المخلوق بأمان.

إذا كنت لا تريد التلاشي في حالة التمرير ، فما عليك سوى إزالة خصائص النقل .

تم تصميمه على هيئة تلميح خاصية title . إليك JSFiddle: http://jsfiddle.net/toe0hcyn/1/

مثال HTML:

<div data-tooltip="your tooltip message"></div>

CSS:

*[data-tooltip] {
    position: relative;
}

*[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;

    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;

    display: block;
    font-size: 12px;
    line-height: 16px;
    background: #fefdcd;
    padding: 2px 2px;
    border: 1px solid #c0c0c0;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}

*[data-tooltip]:hover::after {
    opacity: 1;
}

جافا سكريبت اختياريًا لتغيير موقع tooltip القائم على موضع الماوس:

var style = document.createElement('style');
document.head.appendChild(style);

var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
    var attr = allElements[i].getAttribute('data-tooltip');
    if (attr) {
        allElements[i].addEventListener('mouseover', hoverEvent);
    }
}

function hoverEvent(event) {
    event.preventDefault();
    x = event.x - this.offsetLeft;
    y = event.y - this.offsetTop;

    // Make it hang below the cursor a bit.
    y += 10;

    style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px  }'

}



دون استخدام أي API يمكنك القيام بشيء كهذا أيضًا باستخدام CSS الخالص و Jquery Demo

HTML

<div class="pointer_tooltip"> 
    Click & Drag to draw the area
</div>

CSS

.pointer_tooltip{
  width : auto;
  height : auto;
  padding : 10px;
  border-radius : 5px;
  background-color : #fff;
  position: absolute;
}

مسج

$(document).mousemove(function( event ) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";   

    //set the actuall width
    $('.pointer_tooltip').width($('.pointer_tooltip').width());
    var position_top = event.pageY+18;
    var position_left = event.pageX-60;          
    var width=$('body').width()-$('.pointer_tooltip').width();

    //check if left not minus
    if(position_left<0){
      position_left=10;
    }else if(position_left > width){
     position_left=width-10;
    }       


    $('.pointer_tooltip').css('top',position_top+'px');
    $('.pointer_tooltip').css('left',position_left+'px');
});



جرب هذا. يمكنك فعل ذلك باستخدام css فقط وقد أضفت فقط سمة data-title لتلميح الأدوات.

.tooltip{
  position:relative;
  display: inline-block;
}
.tooltip[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #fff;
  position: absolute;
  left: 0;
  top: 110%;
  white-space: nowrap;  
  border-radius: 5px;  
  background:#000;
}
<div data-title="My tooltip" class="tooltip">
    <label>Name</label>
    <input type="text"/>
</div>
    




Tooltips موقف النقي المغلق

      div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
							
        text-align: center;
      }  					
	
      .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
      }

      .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        //text-align: center;
        border-radius: 6px;
        padding: 5px 0;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
      }

      .tooltip:hover .tooltiptext {
        visibility: visible;
      }		
					
      .toolLeft {
        top: -5px;
        right: 105%;
      }					
					
      .toolRight {
        top: -5px;
        left: 105%;
      }
					
      .toolTop {
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
      }
					
      .toolBottom {
        top: 100%;
        left: 50%;
        margin-left: -60px;
      }
    <div>
			
      <div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br />
      <div class="tooltip">Left  <span class="tooltiptext toolLeft">Tooltip text</span></div><br />			
      <div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br />
      <div class="tooltip">Bottom  <span class="tooltiptext toolBottom">Tooltip text</span></div><br />			
			
    </div>




يمكنك تجربة tooltips التمهيد.

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

مزيد من القراءة here




يمكنك إنشاء تلميحات CSS مخصصة باستخدام سمة بيانات وعناصر زائفة content: attr() سبيل المثال.

http://jsfiddle.net/clintioo/gLeydk0k/11/

<div data-tooltip="This is my tooltip">
    <label>Name</label>
    <input type="text" />
</div>

.

div:hover:before {
    content: attr(data-tooltip);
    position: absolute;
    padding: 5px 10px;
    margin: -3px 0 0 180px;
    background: orange;
    color: white;
    border-radius: 3px;
}

div:hover:after {
    content: '';
    position: absolute;
    margin: 6px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid orange;
    border-bottom: 5px solid transparent;
}

input[type="text"] {
    width: 125px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



إن أبسط طريقة هي ضبط position: relative إلى العنصر الحاوي position: absolute على عنصر تلميح الأدوات داخل الحاوية لجعله عائمًا بالنسبة إلى الأصل (العنصر المحتوي). فمثلا:

<div style="background: yellow;">
    <div style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />

        <div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
            Tooltip text
        </div>
    </div>
</div>



إليك أداة jQuery Tooltip جميلة:

https://jqueryui.com/tooltip/

لتنفيذ هذا ، ما عليك سوى اتباع الخطوات التالية:

  1. أضف هذا الرمز في علامات <head></head> :

    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>    
    <script type="text/javascript">
    $("[title]").tooltip();
    </script> 
    <style type="text/css"> 
    
    /* tooltip styling. by default the element to be styled is .tooltip  */
    .tooltip {
        display:none;
        background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png);
        font-size:12px;
        height:70px;
        width:160px;
        padding:25px;
        color:#fff;
    }
    </style> 
    
  2. في عناصر HTML التي تريد أن يكون بها تلميح الأدوات ، ما عليك سوى إضافة سمة title إليه. أي نص في سمة العنوان سيكون في تلميح الأدوات.

ملاحظة: عند تعطيل جافا سكريبت ، ستعود إلى تلميح أداة المتصفح / نظام التشغيل الافتراضي.




يمكنك جعل تلميح الأدوات باستخدام CSS خالص. حاول هذا واحد. نأمل أن تساعدك على حل مشكلتك.

HTML

<div class="tooltip"> Name
    <span class="tooltiptext">Add your tooltip text here.</span>
</div>

CSS

.tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 270px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 1s;
    }

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



إليك تطبيق بسيط لتلائم الأدوات يراعي موضع الماوس بالإضافة إلى ارتفاع وعرض نافذتك:

function showTooltip(e) {
  var tooltip = e.target.classList.contains("tooltip")
      ? e.target
      : e.target.querySelector(":scope .tooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}
.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .tooltip {
    display: block;
}

.tooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    padding: 5px;
    z-index: 1000;
    color: black;
}
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="tooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="tooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="tooltip">This is yet
another tooltip</span></span>.

(انظر أيضا هذا الكمان )