طريقة إظافة خاصية التلميح على الأيقونات لبلوجر / إظافات بلوجر

نبقى مع طريقة التركيب

طريقة تركيب الإضافة

/* tooltip------------------------------------- */

[data-tooltip]:before {

    position: absolute;

    top: 145%;

    left: 125%;

    margin-bottom: 5px;

    margin-left: -90px;

    padding: 5px 0px 5px 0px;

    width: 80px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    background-color: #000;

    background-color: #b44;

    color: #fff;

    content: attr(data-tooltip);

    text-align: center;

    font-size: 12px;

    line-height: 1.2;

}

[data-tooltip]:after {

  position: absolute;

  top: 126%;

  left: 50%;

  margin-left: -5px;

  width: 0;

  border-bottom: 5px solid #000;

  border-bottom: 5px solid #b44;

  border-right: 5px solid transparent;

  border-left: 5px solid transparent;

  content: " ";

  font-size: 0;

  line-height: 0;

}

[data-tooltip] {

  position: relative;

  z-index: 2;

  cursor: pointer;

}

[data-tooltip]:before,

[data-tooltip]:after {

  visibility: hidden;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);

  opacity: 0;

  pointer-events: none;

}

[data-tooltip]:hover:before,

[data-tooltip]:hover:after {

  visibility: visible;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);

  opacity: 1;

}

/* tooltip------------------------------------- */

كمثال:

<li><a data-tooltip='الرئيسية' href='https://soft224.blogspot.com/' rel='dofollow' target='_blank'></a> </li>