Tooltip HTML not honoring CSS styles

[taylor.carnell]

I am an ex-web dev helping a designer to style tooltips for an InfraWorks model. We are trying to get text to wrap around to the next line, but the tooltip appears to be ignoring some CSS properties. The main problem is that while I can reduce the size of the tooltip, I cannot size my div or text elements which will not break/wrap until the width is reduced.

It appears correct in the visual view and when loading the HTML/CSS in a browser.

However when rendered in Infraworks, the width of elements (other than tooltip) appear to be ignored or overwritten. If it is the latter, the important flag does not stop this from happening. 

Code is as follows:

<tooltip radius="20">
    <style>
	max-width:400px;
    </style>
</tooltip>
    
<div style="max-width:400px;">
    <h2> Heading 1 </h2>
    <br>
    <p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>

    <br>
    <br>
    <h2> Heading 2 </h2>
    <br>
    <p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
</div>

I have tried setting the width of the paragraph elements inline and from the tooltip's style block as well, but to now avail. 

Please advise. 

Thanks! 

[taylor.carnell]

I am an ex-web dev helping a designer to style tooltips for an InfraWorks model. We are trying to get text to wrap around to the next line, but the tooltip appears to be ignoring some CSS properties. The main problem is that while I can reduce the size of the tooltip, I cannot size my div or text elements which will not break/wrap until the width is reduced.

It appears correct in the visual view and when loading the HTML/CSS in a browser.

However when rendered in Infraworks, the width of elements (other than tooltip) appear to be ignored or overwritten. If it is the latter, the important flag does not stop this from happening. 

Code is as follows:

<tooltip radius="20">
    <style>
	max-width:400px;
    </style>
</tooltip>
    
<div style="max-width:400px;">
    <h2> Heading 1 </h2>
    <br>
    <p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>

    <br>
    <br>
    <h2> Heading 2 </h2>
    <br>
    <p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
</div>

I have tried setting the width of the paragraph elements inline and from the tooltip's style block as well, but to now avail. 

Please advise. 

Thanks! 

[John_DeLeeuw · Accepted solution]

@taylor.carnell you need to add the forcewebview attribute in the tooltip header like this: 

<tooltip radius="20" forcewebview="true">

Example:

For simple tooltip content there is no web view used. The advantage is, that the size of the tooltip gets adjusted automatically. Nevertheless, sometimes not all html elements or styling are visualized correctly in this case. Then it might be necessary to force the use of the web view by setting this property to true.

[John_DeLeeuw · Accepted solution]

@taylor.carnell you need to add the forcewebview attribute in the tooltip header like this: 

<tooltip radius="20" forcewebview="true">

Example:

For simple tooltip content there is no web view used. The advantage is, that the size of the tooltip gets adjusted automatically. Nevertheless, sometimes not all html elements or styling are visualized correctly in this case. Then it might be necessary to force the use of the web view by setting this property to true.

[taylor.carnell]

Awesome. Working Well. Cheers!

[taylor.carnell]

Awesome. Working Well. Cheers!