Change Tooltip position (v2024)

PHPMaker General Discussion (PHPMaker)
1

Hello, I want to change tooltip position in a custom file, starting from the bootstrap example (I’ve added the ew-tooltip class)

<button type="button" class="btn btn-secondary ew-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>

The tooltip stay in default bottom position, how can I change the position to right?

Thanks!

2

You have wrong data-* attributes, you may refer to Bootstrap docs on Tooltip Markup.

3

Yes, you’re right. I can reproduce the same issue, too.

You may try this code, both buttons will display tooltip at the bottom, not left or not right.

<button type="button" class="btn btn-secondary ew-tooltip" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-secondary ew-tooltip" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">Tooltip on right</button>
4

Well, I think I’ve just found out why the tooltip position always at the right. That’s because of this following code in js/ewcore.js file:

tooltipOptions: {
  placement: "bottom",
  customClass: "ew-custom-tooltip",
  sanitizeFn: null
},

As you can see, the default position is always at the Bottom.

So, in order to move the tooltip position to the Right, then you may simply add this following code at the Startup Script section:

  ew.tooltipOptions.placement = "right";

Hope that helps.

1 Like
5

It works, thanks a lot!