Подсказка Angular-ui неправильно отображается в ng-grid

Я некоторое время искал решение для отображения всплывающей подсказки в ng-grid, но безуспешно. Когда я использую cellTemplate в ng-grid для настройки ячейки для включения всплывающей подсказки, у меня возникают различные проблемы: всплывающая подсказка либо не отображается, либо ведет себя странно, как показано в плункере: http://plnkr.co/edit/MFhwgOvSUFKcyJPse5wf.

Я что-то пропустил? У кого-нибудь есть решение для красивого отображения всплывающих подсказок в ng-grid?

С наилучшими пожеланиями.


angularjs angular-ui-bootstrap ng-grid
person jstensen    schedule 20.08.2013    source источник
comment
Это известная проблема: github.com/angular-ui/ng-grid/ вопросы/317   -  person Davin Tryon    schedule 20.08.2013

Ответы (2)


arrow_upward
14
arrow_downward

Как я уже говорил, это известная проблема внутри ячейки ng-grid. Я исправил это, установив cellClass в определении столбца следующим образом:

cellClass: 'cellToolTip'

И CSS:

.cellToolTip {
    overflow: visible;
}

Вот плункер, который показывает всплывающую подсказку. Однако всплывающая подсказка расположена не совсем правильно. :)

EDIT: добавление этого к стилю .tooltip устранило проблему с позиционированием, но я не уверен, почему в Plunker мне пришлось это делать. В моем собственном коде в этом не было необходимости:

.tooltip {
  top: 0 !important;
}

Вот новый плункер, который работает.

person Davin Tryon    schedule 20.08.2013
comment
Спасибо - однако позиционирование важно, у вас есть какие-либо предложения о том, как правильно расположить всплывающую подсказку? - person jstensen; 21.08.2013
comment
Это будет связано с вашим шаблоном. Я взгляну. - person Davin Tryon; 21.08.2013
comment
Интересная проблема с вашим решением. {name: Tiancum В нем много информации, поэтому он выходит за пределы диаграммы и создает горизонтальную прокрутку, возраст: 43}, - person DRaehal; 24.02.2014
comment
Оба вышеуказанных плунжера сейчас не работают. Можете ли вы это исправить? - person Sampath; 05.07.2016

arrow_upward
37
arrow_downward

Вы можете использовать

tooltip-append-to-body="true"

как описано здесь (прокрутите вниз до всплывающей подсказки): http://angular-ui.github.io/bootstrap/

Вот плункер: http://plnkr.co/edit/nHN2p8qMjT7ZTwpXgJoO?p=preview

person lmyers    schedule 05.02.2014
comment
Это сработало для меня, а принятый ответ - нет. Использование angular 1.2.2, angular-ui 0.4, ng-grid 2.0.7. - person John Hoerr; 12.02.2014
comment
Похоже, это было исправлено в более поздней версии, и правильный способ сделать это - этот ответ. - person Ty Danielson; 01.03.2014
comment
Фиксированный. Исходный код ng-grid был перемещен. Плункеры сейчас не работают в собственной документации по той же причине. - person lmyers; 11.07.2016