Название стиля ссылки

Question

Я изо всех сил пытаюсь создать заголовок ссылки с помощью jQuery-mobile. Каждая ссылка является игроком. У каждого игрока есть особые способности. Это то, что я хотел бы показывать, когда пользователь наводится на этого игрока. Я пробовал много образцов кода, но никто из них не работал. Моя последняя попытка заключается в этом jsFiddle.

Вот ссылка в разметки (HTML):

<li class="ui-btn-icon-left"><a class="tooltip" data-tooltip="Promising goalkeeper" href="#"><span>L_Oikonomo</span></a></li> 

Ниже CSS для всплывающей подсказки (без префиксы):

/* tooltip body text */ 
.tooltip:hover:before { 
    display:block; 
    background:#eee; 
    background:linear-gradient(rgba(255, 205, 205, 0.9), rgba(228, 230, 230, 0.9)); 
    content:attr(data-tooltip); /* this link attribute contains tooltip text */ 
    position:absolute; 
    font-size:0.9em; 
    color:rgba(51, 51, 51, 0.9); 
    bottom:20px; /* ensure link text is visible under tooltip */ 
    right:0px; /* align both tooltip and link right edges */ 
    width:11em; /* a reasonable width to wrap tooltip text */ 
    text-align:center; 
    padding:4px; 
    border:2px solid rgba(204, 153, 153, 0.9); 
    border-radius:6px; 
    box-shadow:-2px -2px 2px rgba(20, 20, 20, 0.4); 
} 
/* styles shared by both triangles */ 
.tooltip:hover span:before, .tooltip:hover span:after { 
    content:""; 
    position:absolute; 
    border-style:solid; 
} 
/* outer triangle: for border */ 
.tooltip:hover span:before { 
    bottom:5px; /* value = tooltip:hover:before (border-width*2)+1 */ 
    right:40px; /* controls horizontal position */ 
    border-width:16px 16px 0; /* top, right-left, bottom */ 
    border-color:rgba(204, 153, 153, 0.9) transparent; /* top/bottom, right-left (lazy becasue bottom is 0) */ 
} 
/* inner triangle: for fill */ 
.tooltip:hover span:after { 
    bottom:8px; /* value = tooltip:before (border-width*2) */ 
    right:42px; /* above 'right' value + 2 */ 
    border-width:14px 14px 0; /* 2 less than above */ 
    border-color:rgba(225, 238, 238, 0.95) transparent; /* tweak opacity by eye/eyedropper to obscure outer triangle colour */ 
} 

Является ли это возможно, чтобы получить эту работу? Если нет, у вас есть что-то еще, чтобы создать название ссылки?

Answer 1

Проблема, с которой вы сталкиваетесь с кодом, по-видимому, частично из-за того, что псевдоэлемент .tooltip:before используется в другом месте (опять же, возможно, в библиотеке). Поскольку вы уже используете мобильную библиотеку jQuery, вам может быть лучше посмотреть на jQuery UI's tooltip.

Если вы не хотите использовать библиотеку, следующие изменения нужно сделать, чтобы решить эту проблему и получить стилизованную подсказку (или название) отображается при перемещении мыши над элементом анкера:

• В настоящее время библиотека добавляет overflow: hidden к элементу привязки. Если это не удалено, всплывающая подсказка не будет отображаться полностью, поскольку переполняющая часть будет скрыта.

  .ui-page-theme-a .ui-block-a a.ui-btn { 
      overflow: visible; 
  }

• Используйте span тег, чтобы создать всплывающую подсказку вместо a тега (потому что, как уже упоминалось ранее, псевдо-элемент в a тега, кажется, уже используется).

  <li class="ui-btn-icon-left"> 
      <a href="#"> 
      <span class="tooltip" data-tooltip="Promising goalkeeper">L_Oikonomo</span> 
      </a> 
  </li>

• Добавить position: relative к span элементу, как нам нужно расположить подсказку абсолютно по отношению к нему.

  .tooltip { 
      position: relative; 
  }

• Добавьте код для отображения всплывающей подсказки при перемещении мыши над якорем. Это почти то же самое, что и исходный код, за исключением нескольких минимальных изменений. z-index добавляется так, что всплывающая подсказка отображается над текстом ссылки.

  a:hover .tooltip:before { 
      position: absolute; 
      content: attr(data-tooltip); 
      bottom: 2em; /* ensure link text is visible under tooltip */ 
      right:0px; /* align both tooltip and link right edges */ 
      height: 2em; 
      width: 11em; 
      background:linear-gradient(rgba(255, 205, 205, 0.9), rgba(228, 230, 230, 0.9)); 
      content:attr(data-tooltip); /* this link attribute contains tooltip text */ 
      font-size:0.9em; 
      color:rgba(51, 51, 51, 0.9); 
      text-align:center; 
      padding:4px; 
      border:2px solid rgba(204, 153, 153, 0.9); 
      border-radius:6px; 
      box-shadow:-2px -2px 2px rgba(20, 20, 20, 0.4); 
      z-index: 1; 
  }

• Код внизу для треугольника внизу. Я использовал метод transform: rotate(45deg) для создания треугольника вместо метода border, потому что у нас есть только один запасной псевдоэлемент. Дополнительный градиент необходим, потому что нам нужно, чтобы треугольник был окрашен только на половину его размера.

  a:hover .tooltip:after { 
      content:""; 
      position:absolute; 
      bottom: calc(2em - 8px); 
      right:42px; 
      height: 10px; 
      width: 10px; 
      background: linear-gradient(135deg, transparent 50%, #eee 50%); 
      border: 1px solid rgba(204, 153, 153, 0.9); 
      border-width: 0px 2px 2px 0px; 
      transform: rotate(45deg); 
      z-index: 2; 
  }

Fiddle Demo