Как добавить одну подсказку для нескольких элементов?

Я хочу добавить всплывающую подсказку для каждой ячейки таблицы. Таблица содержит 126 ячеек, и мне нужно найти короткий способ добавления всплывающей подсказки. Однако каждый из них должен иметь свой собственный титул. Поэтому всплывающая подсказка должна быть как для каждого элемента, так и настраиваться. Есть ли способ сделать это, особенно в PrimeFaces. Спасибо.Как добавить одну подсказку для нескольких элементов?

<tr> 
    <td id="0-0" onclick="locationClick(this)" class="table_cell" > info1 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,0)}</span></td> 
    <td id="0-1" onclick="locationClick(this)" class="table_cell" > info2 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,1)}</span></td> 
    <td id="0-2" onclick="locationClick(this)" class="table_cell" > info3 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,2)}</span></td> 
    <td id="0-3" onclick="locationClick(this)" class="table_cell" > info4 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,3)}</span></td> 
    <td id="0-4" onclick="locationClick(this)" class="table_cell" > info5 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,4)}</span></td> 
    <td id="0-5" onclick="locationClick(this)" class="table_cell" > info6 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,5)}</span></td> 
    <td id="0-6" onclick="locationClick(this)" class="table_cell" > info7 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,6)}</span></td> 
</tr>

источник

2017-02-04 Ahmet AY

Вы собираетесь загрузить содержимое подсказок инструмента из БД? или из массива подсказок инструментов или что-нибудь еще, скажите, откуда вы собираетесь загружать содержимое подсказок? – SAM

От управляемого bean –

Из массива конечно объектов. Краткие названия курса отображаются в таблице, а всплывающая подсказка должна отображать полное имя. –

так, что я сделал генерируюсь всплывающей подсказка с использованием псевдо-элемента и содержания подсказки от «данной подсказки» атрибут соответствующего td элемента

td:hover:after { 
 
    content: attr(data-tip); 
 
    display: block; 
 
    position: absolute; 
 
    background-color: #333; 
 
    color: white; 
 
    padding: 7px 10px; 
 
    border-radius: 2px; 
 
} 
 

 
td:after { 
 
    display: none; 
 
} 
 

 
td { 
 
    position: relative; 
 
    cursor: pointer; 
 
}

<table> 
 
<tr> 
 
    <td id="0-0" onclick="locationClick(this)" class="table_cell" data-tip="one1" > info1 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,0)}</span></td> 
 
    <td id="0-1" onclick="locationClick(this)" class="table_cell" data-tip="one2"> info2 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,1)}</span></td> 
 
    <td id="0-2" onclick="locationClick(this)" class="table_cell" data-tip="one3"> info3 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,2)}</span></td> 
 
    <td id="0-3" onclick="locationClick(this)" class="table_cell" data-tip="one4"> info4 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,3)}</span></td> 
 
    <td id="0-4" onclick="locationClick(this)" class="table_cell" data-tip="one5"> info5 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,4)}</span></td> 
 
    <td id="0-5" onclick="locationClick(this)" class="table_cell" data-tip="one6"> info6 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,5)}</span></td> 
 
    <td id="0-6" onclick="locationClick(this)" class="table_cell" data-tip="one7"> info7 <br/> <span class="table_cell_line2">#{preparedProgramBean.getSecondLineInfoOfLocation(0,6)}</span></td> 
 
</tr> 
 
    </table>

источник

2017-02-04 14:01:40

Есть ли способ использовать одну всплывающую подсказку для всех ячеек? У Primefaces есть решение, но ıt не полностью решает мою проблему. –

применить к тэгу тэга, я имею в виду, что этот атрибут 'data-tip' на теге' tr' –

. Прайса использует такой дополнительный элемент для всплывающей подсказки http: //www.primefaces .org/showcase/ui/overlay/tooltip/tooltipOptions.xhtml –

Как добавить одну подсказку для нескольких элементов?

ответ

Смежные вопросы