Wappler Version : 4.0.0
Operating System : Windows 10 Pro
Server Model: IIS
Database Type: MySQL
Hosting Type: Azure
What do you think should happen?
Tool tip would display text on hover.
What actually happens?
Tool tip does not display text, can confirm this only happens on Bootstrap 5 tables. Tool tip works everywhere else.
Create bootstrap 5 table, using tooltips, add text on over to anything within the table.
What element do you apply the tooltip to?
Is it a dynamic table? Do you see errors in the browser console?
Can you share your table code please?
Hi Teodor, it is a dynamic table and I see no errors in the console or in wappler. I will update when I get to office with code. Thank you!
Here is the code
<div class="table-responsive small d-print-none" dmx-show="qry_otr_user.data.qry_otr_user.data.hasItems()">
<table class="table table-striped table-hover table-sm">
<thead>
<tr class="h6 bg-primary text-light">
<th class="sorting border-dark fw-light" dmx-on:click="StateMGR_SO.set('sort','so_orderid');StateMGR_SO.set('dir',StateMGR_SO.data.dir == 'desc' ? 'asc' : 'desc')"
dmx-class:sorting_asc="StateMGR_SO.data.sort=='so_orderid' && StateMGR_SO.data.dir == 'asc'" dmx-class:sorting_desc="StateMGR_SO.data.sort=='so_orderid' && StateMGR_SO.data.dir == 'desc'">
Order
number</th>
<th class="sorting border-dark fw-light" dmx-on:click="StateMGR_SO.set('sort','Name');StateMGR_SO.set('dir',StateMGR_SO.data.dir == 'desc' ? 'asc' : 'desc')"
dmx-class:sorting_asc="StateMGR_SO.data.sort=='Name' && StateMGR_SO.data.dir == 'asc'" dmx-class:sorting_desc="StateMGR_SO.data.sort=='Name' && StateMGR_SO.data.dir == 'desc'">Customer</th>
<th class="sorting border-dark fw-light" dmx-on:click="StateMGR_SO.set('sort','so_sales_name');StateMGR_SO.set('dir',StateMGR_SO.data.dir == 'desc' ? 'asc' : 'desc')"
dmx-class:sorting_asc="StateMGR_SO.data.sort=='so_sales_name' && StateMGR_SO.data.dir == 'asc'"
dmx-class:sorting_desc="StateMGR_SO.data.sort=='so_sales_name' && StateMGR_SO.data.dir == 'desc'">Svc
Manager</th>
<th class="sorting border-dark d-none d-sm-table-cell fw-light" dmx-on:click="StateMGR_SO.set('sort','so_created_dt');StateMGR_SO.set('dir',StateMGR_SO.data.dir == 'desc' ? 'asc' : 'desc')"
dmx-class:sorting_asc="StateMGR_SO.data.sort=='so_created_dt' && StateMGR_SO.data.dir == 'asc'"
dmx-class:sorting_desc="StateMGR_SO.data.sort=='so_created_dt' && StateMGR_SO.data.dir == 'desc'">Date
In
</th>
<th class="sorting border-dark fw-light" dmx-on:click="StateMGR_SO.set('sort','so_sched_dt');StateMGR_SO.set('dir',StateMGR_SO.data.dir == 'desc' ? 'asc' : 'desc')"
dmx-class:sorting_asc="StateMGR_SO.data.sort=='so_sched_dt' && StateMGR_SO.data.dir == 'asc'" dmx-class:sorting_desc="StateMGR_SO.data.sort=='so_sched_dt' && StateMGR_SO.data.dir == 'desc'">
Scheduled</th>
<th class="sorting border-dark fw-light" dmx-on:click="StateMGR_SO.set('sort','so_closed_dt');StateMGR_SO.set('dir',StateMGR_SO.data.dir == 'desc' ? 'asc' : 'desc')"
dmx-class:sorting_asc="StateMGR_SO.data.sort=='so_closed_dt' && StateMGR_SO.data.dir == 'asc'"
dmx-class:sorting_desc="StateMGR_SO.data.sort=='so_closed_dt' && StateMGR_SO.data.dir == 'desc'">Closed
</th>
<th class="sorting border-dark fw-light" dmx-on:click="StateMGR_SO.set('sort','so_closed_dt');StateMGR_SO.set('dir',StateMGR_SO.data.dir == 'desc' ? 'asc' : 'desc')"
dmx-class:sorting_asc="StateMGR_SO.data.sort=='so_status' && StateMGR_SO.data.dir == 'asc'" dmx-class:sorting_desc="StateMGR_SO.data.sort=='so_status' && StateMGR_SO.data.dir == 'desc'">
Ticket
Status</th>
<th class="border-dark d-none d-md-table-cell fw-light">Days Open</th>
<th scope="row" class="border-dark d-none d-md-table-cell"></th>
<th scope="row" class="border-dark d-none d-md-table-cell"></th>
</tr>
</thead>
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="qry_otr_user.data.qry_otr_user.data" id="tableRepeat1" dmx-state="StateMGR_SO" dmx-sort="sort" dmx-order="dir">
<tr class="h6 ">
<td dmx-class:bg-warning-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 15 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0"
dmx-class:bg-danger-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 30 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0" data-animation="false" data-placement="right"
class="small text-start"><a href="#" dmx-bind:href="/service/orders/{{so_orderid}}/{{so_cust_uuid}}/">
{{so_orderid}} </a></td>
<td dmx-class:bg-warning-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 15 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0"
dmx-class:bg-danger-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 30 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0" class="small text-start">{{Name+' - '+ShipAddressCity}}<br><span
class="badge bg-secondary mr-1" dmx-show="(so_invoiced == 1)">INVOICED
#{{so_invoice_num}} </span></td>
<td dmx-text="so_sales_name" dmx-class:bg-warning-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 15 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0"
dmx-class:bg-danger-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 30 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0" class="small text-start">{{so_sales_name.default('')}}
</td>
<td dmx-text="so_created_dt.formatDate("MM/dd/yyyy").default('')"
dmx-class:bg-warning-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 15 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0"
dmx-class:bg-danger-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 30 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0" class="d-none d-sm-table-cell small text-start"></td>
<td dmx-text="so_sched_dt.formatDate('MM/dd/yyyy').default('')"
dmx-class:bg-warning-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 15 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0"
dmx-class:bg-danger-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 30 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0" class="small text-start"></td>
<td dmx-text="so_closed_dt.formatDate('MM/dd/yyyy').default('')"
dmx-class:bg-warning-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 15 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0"
dmx-class:bg-danger-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 30 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0" class="small text-start"></td>
<td dmx-class:bg-warning-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 15 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0"
dmx-class:bg-danger-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 30 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0" class="small text-start"><span class="badge bg-dark mr-1"
dmx-show="((so_status == 250) || (so_status == 'Cancelled'))" dmx-bs-tooltip="">CLOSED
</span><span class="badge bg-warning mr-1" dmx-show="(so_status == 200) ">BILLING {{so_billing_dt.formatDate('MM/dd/yyyy')}}<br>
</span><span class="badge bg-warning mr-1" dmx-show="(so_status == 175)">WORK COMPLETED {{so_work_complete_dt.formatDate('MM/dd/yyyy')}}
</span><span class="badge bg-info mr-1" dmx-show="((so_status == 50) || (so_status == 'Assigned'))">ASSIGNED
</span><span class="badge bg-primary mr-1" dmx-show="((so_status == 100) || (so_status == 'Scheduled'))">SCHEDULED
</span><span class="badge bg-success mr-1" dmx-show="(so_status == 10)">NEW
</span><span class="badge bg-danger mr-1" dmx-show="((so_status == 150) || (so_status == 'HOLD'))">HOLD
</span><span class="badge bg-danger mr-1" dmx-show="(so_cancelled == 1)" dmx-bs-tooltip="so_cancelled_why" data-animation="false" data-html="true">CANCELLED
</span><span class="badge bg-danger mr-1" dmx-hide="(so_sub_listid == '0')" dmx-bs-tooltip="ven_name" data-animation="false">CONTRACTOR
</span> <span class="badge bg-danger mr-1" dmx-show="(so_not_invoiced == 1)" dmx-bs-tooltip="so_not_inv_why" data-animation="false" data-html="true">NOT INVOICED
</span><span class="badge bg-danger mr-1" dmx-show="so_urgent == 1" data-animation="false">911
</span><span class="text-danger mr-1" dmx-show="(so_sync_error == 1)"><i class="fas fa-exclamation-square fa-lg"></i>
</span> <span class="text-success mr-1" dmx-show="(so_prop_id != 0)" dmx-bs-tooltip="'Created from Proposal'" data-placement="left" data-animation="false"><i class="fas fa-usd-circle fa-lg"></i>
</span><span class="text-danger mr-1" dmx-show="(so_cust_alert == 1)" dmx-bs-tooltip="'Client Gets Alert'" data-placement="left" data-animation="false"><i class="fas fa-bell-exclamation fa-lg"></i>
</span><span class="text-dark mr-1" dmx-show="(so_parts == 1)" dmx-bs-tooltip="'Parts Needed'" data-placement="left" data-animation="false"><i class="fas fa-wrench fa-lg"></i>
</span><span dmx-show="(so_sync_pending == 1)" class="text-center text-info mr-2"><i dmx-bs-tooltip="'Sync Pending'" data-animation="false" data-placement="left" data-fa-i2svg=""><svg
class="svg-inline--fa fa-sync fa-w-16 fa-lg" dmx-bs-tooltip="'Sync Pending'" data-animation="false" data-placement="left" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sync"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor"
d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z">
</path>
</svg></i></span>
</td>
<td dmx-class:bg-warning-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 15 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0"
dmx-class:bg-danger-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 30 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0" class="d-none d-md-table-cell small text-start">
<span dmx-show="(qry_otr_user.data.qry_otr_user.data[0].so_closed == 0)">{{so_created_dt.daysUntil(datetimeTopDays.datetime)}}</span>
</td>
<td class="d-none d-md-table-cell text-end">
<button id="btn5" class="btn btn-sm border-dark btn-info text-left text-light me-1" dmx-bs-tooltip="'(Last Modified:'+so_modified_dt.formatDate('MM/dd/yyyy')+')'+so_servreq" data-placement="left"
data-html="true" data-bs-animation="false"><i class="fa-solid fa-info"></i></button><button id="btn6" class="btn btn-sm btn-gray border-dark text-light btn-secondary"
dmx-on:click="browserTop.goto('/service/orders/'+so_orderid+'/'+so_cust_uuid+'/')"><i class="fas fa-pen"></i></button>
</td>
<td dmx-class:bg-warning-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 15 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0"
dmx-class:bg-danger-light="so_created_dt.daysUntil(datetimeTopDays.datetime) >= 30 && qry_otr_user.data.qry_otr_user.data[0].so_closed == 0" class="d-none d-md-table-cell"></td>
</tr>
</tbody>
</table>
</div>
Im not sure if this is what was fixed but in 4.0.1 change logs is improved tooltips
Yeah the update did not resolve but thank you
Fixed in Wappler 6 beta 10