Нужна помощь в размещении всплывающей подсказки справа от ярлыка - PullRequest
0 голосов
/ 13 ноября 2018

У меня есть таблица информации о свойствах и подсказка для каждого заголовка.Мне нужно поместить всплывающую подсказку справа от метки, по центру.Я нахожусь в схеме вещей новичка с CSS и манипулирования HTML-элементами с ним.Вот JSFiddle с моим кодом.Это большой проект, поэтому я не смог получить все CSS, чтобы он соответствовал включенному изображению, но, надеюсь, у вас будет общее представление.

Вот пример моей таблицызаголовок, если вам просто нужен взгляд.

<th rowspan="2" data-field="Address">
  <span>Property<br />address</span>
    <a style="position: relative; top: 25%; right: 0;" tabindex="0" role="button" 
      data-toggle="popover" data-container="body" data-trigger="hover click" 
      title="Property address" data-content="An all-inclusive list of properties associated 
      to your agreement">
        <span class="glyphicon glyphicon-question-sign info-popover"></span>
    </a>
</th>

enter image description here http://jsfiddle.net/gsxb0c65

1 Ответ

0 голосов
/ 13 ноября 2018

Один из способов добиться этого - использовать position.

. Вы начнете с создания <th style="position: relative;">, что позволит расположенным внутри него элементам соблюдать свои собственные границы.

Далее, вы бы взяли ваш <a> внутрь и сделали его position: absolute;, как показано ниже:

th > a {
    position: absolute;
    //these two rules put it vertically centered no matter what inside of the container
    top: 50%;
    transform: translateY(-50%);
    //and then set the right to however far you'd like it away from the right side of the <th>
    right: 20px;
}

Возможно, вы также захотите text-align: center; <a>Таким образом, значок всегда находится в центре, как он отображается.Но это правило должно позволить вам стать намного ближе к тому, что вы ищете.

РЕДАКТИРОВАТЬ: Добавлены обновления для скрипки для вас http://jsfiddle.net/2468jgew/

EDIT2: Вот еще один пост StackOverflow, объясняющий правила, которые я вам изложил Преобразование: перевод (-50%, -50%)

...