javascript - how to make tooltip using displaytag -
so our project using displaytag on frontend display our tables , such.
<display:table id="xxx" style="width:100%; border-bottom: 0; border-right: 0; border-left: 0;" name="ref_results" defaultsort="2" defaultorder="ascending" requesturi="flow.action?_flowexecutionkey=${flowexecutionkey}" excludedparams="*" export="true" sort="list"> .... <span class="tooltip"><display:column property="status" title="status" style="width:7%" sortable="true" sortproperty="status" sortname="status" media="html csv excel xml pdf"><span class="tooltiptext">this tooltip text displayed when hovering on column<span>
regardless of how wrap display:column tooltip , tooltiptext classes (whether label tag, span tag, etc) elements , text not displayed in resulting html. not able manipulate element @ using css or javascript, etc make display tooltip. table , columns show fine in resulting html not tooltip class elements
my css below shows fine on resulting page. tooltip class tags , elements not showing @ all... how can fix can tooltips show columns , such?
<style> .tooltip{ position: relative; display: inline-block; } .tooltiptext{ /*visibility: hidden; */ width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 1s; } .tooltip .tooltiptext::after { /*content: "";*/ position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
wiki
Comments
Post a Comment