Line and area charts only showing tooltips if grid is enabled

[lampsbr]

I'm using vue-apexcharts wrapper (both 1.6.x and 1.7.0 versions) and apexcharts 4.4.0 / 4.5.0 (also tried both versions). I was able to do extensive customizations to chart visuals, but I'm stuck for days trying to show the default tooltip when the chart contents are hovered without enablind the grid option.
Here's the desired result, except for the horizontal lines in chart's content:

So I believed that setting chart option tooltip.enabled to true was enough for rendering that beautiful tooltip in the chart, close to the place I'm hovering, but in my charts it is not. There's probably other settings preventing my chart from working as desired. What I found out is that I need to set grid.show to true for tooltip to appear. If I try to set grid.yaxis.lines.show to false, to try to trick the settings to show my tooltip and not to render the grid horizontal lines, the tooltip does not show up. If I disable the yaxis lines but enable grid.xaxis.lines.show my tooltip also works, but then I have to deal with undesired vertical lines, same problem as before.

Here are the objects that I feed to my vue-apexcharts wrapper, except that I anonymized my data:

series = [
   {
       "name": "my y axis title",
       "data": [
           [
               1659236400000,
               "74.83"
           ],
           [
               1659841200000,
               "83.75"
           ],
           [
               1660446000000,
               "318.74"
           ],
...
           [
               1665284400000,
               "296.60"
           ],
           [
               1665889200000,
               "200.08"
           ],
           [
               1666494000000,
               "192.09"
           ],
       ]
   }
]

options = {
   "colors": [
       "#9C27B0"
   ],
   "chart": {
       "type": "line",
       "toolbar": {
           "show": false
       },
       "zoom": {
           "enabled": false
       }
   },
   "fill": {
       "colors": [
           "#9C27B0"
       ],
       "opacity": 0.8,
       "type": "solid"
   },
   "grid": { //if I disable grid, or disable both axis, my tooltip stops working
       "show": true,
       "xaxis": {
           "lines": {
               "show": false
           }
       },
       "yaxis": {
           "lines": {
               "show": true
           }
       }
   },
   "legend": {
       "show": false
   },
   "tooltip": { //I can delete tooltip object and the grid tooltip keeps working
       "enabled": true,
       "intersect": false
   },
   "annotations": {
       "yaxis": [],
       "xaxis": [],
       "points": []
   },
   "stroke": {
       "width": 2,
       "curve": "straight",
       "lineCap": "round"
   },
   "xaxis": {
       "axisTicks": {
           "show": true
       },
       "labels": {
           "show": true,
           "rotate": 0,
           "hideOverlappingLabels": true
       },
       "convertedCatToNumeric": true
   },
   "yaxis": {
       "max": 700,
       "min": 0,
       "title": {
           "text": "my axis title"
       },
       "labels": {}
   }
}

[lampsbr]

So by checking a minimal reproducible example, I found that my app's apex charts behaved differently than a jsFiddle version. I found out that my project came from a custom theme, used to bootstrap it years ago, and it had this CSS code for hiding most of my tooltips:

  line[stroke='transparent'] {
    display: none;
  }

There was also a ton of other custom CSS in an apex-chart.scss file. Also the library in use was not the default one, it imported a 2 year-old fork of apex-charts and made it project-default using a webpack sentence. So this part was not directly connected to this issue, but I removed it and installed up-to-date apex-charts anyway.