تغيير تنسيق السمات التوضيحية لعناصر html

عرض title عند عمل hover على عنصر p هو شيء افتراضي مسؤول عنه المتصفح ولا يمكن التعديل عليه مباشرة.

يمكنك محاكاة هذه النافذة من خلال pseudo element مع إعطاءه التنسيقات المطلوبة

<p title="Hello world!">
  Hover over me
</p>

و التحكم بظهوره كما ترغب في CSS 

p {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}
p[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: 100%;
  left: 50%;
}

بجانب ما اقترحه المدرب وائل، يمكنك انشاء عنصرا مخصصا يحمل سمة توضيحية تخص عنصرا ما، فيما يلي الهيكلة العامة للعنصرين: 

<div class="tooltip"> العنصر الرئيسي
  <span class="title">عنصر السمة التوضيحية</span>
</div>

تنسيق العنصرين: 

/*  العنصر */
.tooltip {
  position: relative;
}

/* عنصر السمة التوضيحية */
.tooltip .title {
  /* اخفاء العنصر بشكل افتراضي */
  display:none;
 
  /* يجب تمليك العنصر الوضعية المطلقة */
  position: absolute;
}

/* اظهار العنصر عند تمرير مؤشر الفأرة */
.tooltip:hover .title {
  display:initial;
}

لاحظ أن عنصر السمة هنا يقبل اي عناصر HTML وسيمكن عليه تطبيق أي تنسيقات CSS.