diff --git a/app/resources/views/ventas/reservations.blade.php b/app/resources/views/ventas/reservations.blade.php
index 1677931..959eb06 100644
--- a/app/resources/views/ventas/reservations.blade.php
+++ b/app/resources/views/ventas/reservations.blade.php
@@ -304,26 +304,20 @@
                     valida: reservation => reservation.valid ? '<span class="ui green text">Si</span>' : '<span class="ui red text">No</span>',
                     operador: reservation => reservation.broker?.name ?? '',
                 };
-                return  this.reservations.map(reservation => {
-                    //const date = new Date(Date.parse(reservation.date) + 24 * 60 * 60 * 1000)
+                const tooltipVariation = 'very wide multiline'
+                const tooltips = this.draw().tooltip()
+                return this.reservations.map(reservation => {
                     const data = {}
                     Object.entries(columnValues).forEach(([key, value]) => {
-                        if (key in this.draw().tooltip()) {
-                            data[key] = `data-content="${this.draw().tooltip()[key](reservation)}" data-variation="very wide">${value(reservation)}`
+                        if (key in tooltips) {
+                            const processor = tooltips[key]
+                            const content = processor(reservation)//.replaceAll(' ', '&nbsp;')
+                            data[key] = `data-html="${content}" data-variation="${tooltipVariation}">${value(reservation)}`
                             return
                         }
                         data[key] = value(reservation)
                     })
                     return data
-                    /*return  {
-                        id: reservation.id,
-                        unidades: reservation.summary,
-                        cliente: `data-content="${this.draw().tooltip().buyer(reservation)}">${reservation.buyer.nombreCompleto}`,
-                        fecha: this.formatters.date.format(date),
-                        oferta: `data-content="${this.draw().tooltip().payment(reservation)}">${this.formatters.ufs.format(reservation.offer)} UF`,
-                        valida: reservation.valid ? '<span class="ui green text">Si</span>' : '<span class="ui red text">No</span>',
-                        operador: reservation.broker?.name ?? '',
-                    }*/
                 })
             }
             draw() {
@@ -341,7 +335,7 @@
                             const id = column.id
                             this.columnNames.forEach(name => {
                                 let td = `<td>${column[name]}</td>`
-                                if (['oferta', 'cliente', 'valida'].includes(name)) {
+                                if (column[name].includes('data-content') || column[name].includes('data-html')) {
                                     td = `<td ${column[name]}</td>`
                                 }
                                 contents.push(td)
@@ -355,7 +349,7 @@
                         })
                         this.show()
 
-                        $(this.component).find('[data-content]').popup()
+                        $(this.component).find('[data-content],[data-html]').popup()
 
                         this.watch()
                     },
@@ -376,28 +370,40 @@
                                 const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
 
                                 const output = []
+                                const table = ['<table>']
                                 reservation.units.forEach(unit => {
                                     const type = unit.unit.proyecto_tipo_unidad.tipo_unidad.descripcion
-                                    output.push(`${type.charAt(0).toUpperCase() + type.slice(1)} ${unit.unit.descripcion}: ${formatter.format(unit.value)} UF`)
+                                    table.push(`<tr><td>${type.charAt(0).toUpperCase() + type.slice(1)} ${unit.unit.descripcion}:</td><td align='right'>${formatter.format(unit.value)} UF</td></tr>`)
                                 })
                                 if (reservation.broker !== null) {
-                                    output.push('-----')
+                                    table.push('<tr><td>-----</td></tr>')
                                     let commission = reservation.broker.commission
-                                    output.push(`Broker: ${reservation.broker.name} (${commission})`)
+                                    table.push(`<tr><td>Broker:</td><td align='right'>${reservation.broker.name}</td><td align='right'>(${commission})</td></tr>`)
                                 }
                                 if (reservation.promotions.length > 0) {
-                                    output.push('-----')
+                                    table.push('<tr><td>-----</td></tr>')
                                     reservation.promotions.forEach(promotion => {
-                                        output.push(`${promotion.name}: ${formatter.format(promotion.value)} UF`)
+                                        let value = 0
+                                        switch (promotion.type) {
+                                            case {{ \Incoviba\Model\Venta\Promotion\Type::FIXED }}:
+                                                value = `${formatter.format(promotion.amount)} UF`
+                                                break;
+                                            case {{ \Incoviba\Model\Venta\Promotion\Type::VARIABLE }}:
+                                                value = `${formatter.format(promotion.amount * 100)} %`
+                                                break;
+                                        }
+                                        table.push(`<tr><td>${promotion.description}:</td><td align='right'>${value}</td></tr>`)
                                     })
                                 }
-                                return output.join("\n")
+                                table.push('</table>')
+                                output.push(table.join(''))
+                                return output.join("<br />")
                             },
                             cliente: reservation => {
                                 const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 0, maximumFractionDigits: 0})
                                 return [
                                     `RUT: ${formatter.format(reservation.buyer.rut)}-${reservation.buyer.digito}`
-                                ].join("\n")
+                                ].join("<br />")
                             }
                         }
                     }
@@ -518,27 +524,43 @@
                     const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
 
                     const output = []
+                    const table = [
+                        '<table>',
+                        '<thead>',
+                        '<tr>',
+                        '<th></th>',
+                        '<th>Base Oferta</th>',
+                        '<th>Precio</th>',
+                        '</thead>'
+                    ]
                     reservation.units.forEach(unit => {
                         let type = unit.unit.proyecto_tipo_unidad.tipo_unidad.descripcion
                         type = type.charAt(0).toUpperCase() + type.slice(1)
                         const base = unit.base ?? (unit.value ?? 0);
                         const price = unit.unit.current_precio?.valor ?? 0
                         const diff = (base - price) / price * 100
-                        output.push(`${type} ${unit.unit.descripcion}: ${formatter.format(base)} UF - ${formatter.format(price)} UF (${formatter.format(diff)} %)`)
+                        table.push(`<tr><td>${type} ${unit.unit.descripcion}:</td><td align='right'> ${formatter.format(base)} UF</td><td align='right'>${formatter.format(price)} UF</td><td align='right'>(${formatter.format(diff)} %)</td></tr>`)
                     })
+                    if (reservation.broker !== null) {
+                        table.push('<tr><td>-----</td></tr>')
+                        let commission = reservation.broker.commission
+                        table.push(`<tr><td>Broker:</td><td align='right'>${reservation.broker.name}</td><td align='right'>(${commission})</td></tr>`)
+                    }
                     reservation.promotions.forEach(promotion => {
                         let value = 0
                         switch (promotion.type) {
                             case {{ \Incoviba\Model\Venta\Promotion\Type::FIXED }}:
-                                value = `${formatter.format(promotion.value)} UF`
+                                value = `${formatter.format(promotion.amount)} UF`
                                 break;
                             case {{ \Incoviba\Model\Venta\Promotion\Type::VARIABLE }}:
-                                value = `${formatter.format(promotion.value * 100)} %`
+                                value = `${formatter.format(promotion.amount * 100)} %`
                                 break;
                         }
-                        output.push(`${promotion.description}: ${value}`)
+                        table.push(`<tr><td>${promotion.description}:</td><td align='right'>${value}</td></tr>`)
                     })
-                    return output.join("\n")
+                    table.push('</table>')
+                    output.push(table.join(''))
+                    return output.join("<br />")
                 }
                 draw['tooltip'] = () => {
                     return tooltip