html content in tooltip-auto adjust the size of each cell based on text

[ldwf]

I used the html content visual to create a tooltip to display various text values depending on where hovering in a matrix visual.  Each text value is different in size, so I customize the height and width to fit the maximum text.  This works fine except for text values that are small; i.e, the tooltip always defaults to the size of the largest text value because that is what I set the canvas to, so when the volume of text to display is small the box is too big because it defaults to the custom size I set in the canvas settings.  Is there a way, whether in the html code or any other way, to have the text auto-size based on the size of the text to display?  I tried inline-block but that didn't work; i.e, it still defaults to the size I set for the canvas.

[v-pnaroju-msft]

Hi ldwf,

We are following up to see if your query has been resolved. Should you have identified a solution, we kindly request you to share it with the community to assist others facing similar issues.

If our response was helpful, please mark it as the accepted solution, as this helps the broader community

Thank you.

[v-pnaroju-msft]

Hi ldwf,

We wanted to check in regarding your query, as we have not heard back from you. If you have resolved the issue, sharing the solution with the community would be greatly appreciated and could help others encountering similar challenges.

If you found our response useful, kindly mark it as the accepted solution and provide kudos to guide other members.

Thank you.

[v-pnaroju-msft]

Hi ldwf,

We have not received a response from you regarding the query and were following up to check if you have found a resolution. If you have identified a solution, we kindly request you to share it with the community, as it may be helpful to others facing a similar issue.

If you find the response helpful, please mark it as the accepted solution and provide kudos, as this will help other members with similar queries.

Thank you.

[v-pnaroju-msft · Accepted solution]

Thankyou, @danextian, for your response.

Hi @ldwf,

We appreciate your inquiry through the Microsoft Fabric Community Forum.

We understand that you are using the HTML Content visual in Power BI to display tooltips with varying text lengths, and you seek a tooltip box that automatically resizes based on the content.

Based on my understanding, Power BI does not support automatic resizing of the tooltip page canvas according to content length. The canvas size remains fixed. While techniques such as dynamic font sizing may help optimize space, the container itself does not expand or contract dynamically.

Please consider the following alternatives which might help resolve the issue:

1. Design multiple tooltip pages (for example, small, medium, and large) based on the expected text size and display them conditionally.
2. Use the Deneb Custom Visual. Deneb allows for fully dynamic, data-driven visuals using Vega-Lite and enables you to design tooltips that better adjust to text size and layout.

If you find our response helpful, kindly mark it as the accepted solution and provide kudos. This will assist other community members facing similar queries.

Should you have any further questions or require assistance, please feel free to contact the Microsoft Fabric Community.

Thank you.

[danextian]

Hi @ldwf 

DAX below isn't perfect. You will need to make adjustments here are there to make it look more okay.

ResizableTextHTMLFull = 
VAR TextContent = SELECTEDVALUE('Table'[Text])
VAR TextLength = LEN(TextContent)

-- Define container size in pixels (adjust based on your visual's approx size)
VAR ContainerHeightPx = 120
VAR ContainerWidthPx = 300

-- Font size constraints
VAR MaxFontSize = 40
VAR MinFontSize = 10

-- Font size based on length (linear shrink)
VAR FontSizeByLength = MAX(MinFontSize, ROUND(MaxFontSize - (TextLength * 1.2), 0))

-- Rough estimate of max font size based on container height (allow ~line height 1.1)
VAR MaxFontSizeByHeight = ROUND(ContainerHeightPx / 3, 0)  -- ~3 lines tall text (adjust as needed)

-- Final font size is minimum of the two to avoid overflow vertically or horizontally
VAR FinalFontSize = MIN(FontSizeByLength, MaxFontSizeByHeight)

RETURN
"
<style>
  html, body {
    margin:0; padding:0; height:100%; width:100%;
  }
  .container {
    display: grid;
    place-items: center;
    height: 100%;
    width: 100%;
    background-color: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
  }
  .container p {
    margin: 0;
    width: 100%;
    font-size: " & FinalFontSize & "px;
    word-wrap: break-word;
    line-height: 1.1;
  }
</style>
<div class='container'>
  <p>" & TextContent & "</p>
</div>
"