Hover on text popup textbox

[Former Member]

Hi,

I´m trying to get a popup textbox when hovering over a text.

I´m using this website as a reference: http://www.scientificpsychic.com/etc/css-mouseover.html

I have implemented the CSS code for class dropt in a CSS file and uploaded it to the server and successfully choosen it as the Custom CSS for the Report.

I have put the dropt in the CSS Class the below code in the CSS Style but it does not work.

<span class="dropt" title="Title for the pop-up">Hot Zone Text

  <span style="width:500px;">Pop-up text</span>

</span>

Anyone knows what I´m doing wrong or has any other idea of how to implement hover on text popup textbox?

Thanks,

Anders

[Former Member · Accepted solution]

Hi,

here a simple example what can be done in a Design Studio BI app.

My example has the following outline to demonstrate 2 different css ways how to show an additional text when a user hovers his/her mouse over some text:

When I open this bi app in IE:

When I hover my mouse over the first text a simple popup text appears (when the mouse leaves the text or popup, the popup is hidden):

When I hover my mouse over the 2nd text also a simple popup text appears (when the mouse leaves the text or popup, the popup is hidden):

I used the following simple css just to demonstrate the showing/hiding text possibility when hovering:

For the first way (first 2 rows) - using the ids only, you do not need to create own custom css classes, you just need to find out the ids of your desired text components and substitute "__container0" with the id of the text that is shown and you want to hover, and "__container1" with the id of the text that should be shown as a popup.

Here a screenshot where these ids are located in my html code:

To better understand the css code (selectors) for the 2nd solution by using a panel component and custom css classes, here is how the html tree looks like:

Here an overview what css classes I assigned to the components in the outline (with bold the ones that are actually used in this css example):

TEXT_1 - c_text1

TEXT_2 - c_popup1

PANEL_1 - c_txt_popup_panel1

TEXT_3 - c_text3

TEXT_4 - c_popup4

To learn more about this you can google: "show div on hover with only css" - you will find some great info on stackoverflow.

Regards

David

[former_member224263 · Accepted solution]

Hi David,

I am trying to get your first solution to work. I found the IDs of the containers. Can you tell me where to put the two lines starting with:

#__container1 ...

#__container0: ...

Regards,

Raoul

[Former Member · Accepted solution]

Thank you David!

Regards,

Sri

[Former Member · Accepted solution]

Hi Raoul,

The short answer to your question: you put them into your custom css file which is usually placed into the repository folder of your bi app so that you can then link it to your bi app and your bi app then uses this css code.

First solution:

1. You have 2 text components and you have found out the "ids" of their parent divs in the generated html: in your case the "Standard Text (not popup text)" is associated with the id "__container0" and the "Popup Text (shown only when user hovers with mouse over the Standard Text)" is associated with the id "__container1"
2. You create a custom css file with the name for example: "custom.css". You can name it however you want, just make sure the file extension/type is .css and not .txt.
3. Now place the 2 css definitions into this custom css file:
4. Save this file in your bi app repository folder (note: file type is Cascading Style Sheet Document):
5. Now link this css file in your bi app together with the file extension: custom.css:
6. Save your bi app and execute (show in browser). To solve problems with css file caching and not seeing the css changes in your browser read this: How to add Custom CSS file?

Best regards,

David

[former_member224263 · Accepted solution]

Hi David,

Thanks for you reply. In your original answer to Anders Västfäld question you said:

"For the first way (first 2 rows) - using the ids only, you do not need to create own custom css classes,"

Is there a solution where custom css classes are not used?

Regards,

Raoul

[Former Member · Accepted solution]

Hi Raoul,

Maybe this explanation helps:

In "Solution 1" which I just described you are NOT using CUSTOM css CLASSES.

In "Solution 2" you are using custom css classes being: "c_popup4" and "c_txt_popup_panel1" (where c stands for custom).

In both my solutions you are using CSS which needs to be placed into a custom css file and needs to be linked into your bi app.

The difference in regards to css classes between solution 1 & 2 is that in solution 1 you only link your css file to your bi app (you are using the css selectors that are already available from sap), but in solution 2 you additionally need to assign your custom css classes to your text components for it to work.

That being said: I don't think you can use Solution 1 or Solution 2 without using a custom css FILE, but you can use Solution 1 without needing to use custom CSS CLASSES.

Custom css class = a css class that starts to exist in the html/dom of your bi app only after you assign it (define the name of it) to a component in the "Display > CSS Class" property of the component.

After you defined/assigned a custom css class to a component, the only way to define the css styles for this css class is by defining it in a css file.

Regards,

David

[former_member224263 · Accepted solution]

Thx David,

Sorry for the confusion, I understand u now.

KR

Raoul

[Former Member · Accepted solution]

Hello,

First of all thanks for sharing this, it is very useful.

I am using this pop-up message as a comment for some charts, cross-tab where I can describe what is shown for the end-user.

Nevertheless I have some issue with that.

My dashboard has several pages, I have applied the pop-up message on default page, when I switch to other pages then back to default one the pop-up doesn't work.

I suspect that this is only the matter of refreshing the css but for time being I have now clue how to fix it.

Maybe some of you guys already had this problem as well

Thx

Marcin.

[Former Member · Accepted solution]

Hi David,

I've managed to follow your instructions and hover "solution 1".

Nevertheless, unfortunately I did not fully understand your "solution 2" explanation.

Under "solution 1" I have replaced container1 with the HTML code which worked perfectly. Which codes should I be copying under "solution2" into the CSS file instead of the codes: c_txt_popup_panel1 and c_popup4? Should I find the technical name of the component and then add a ".c_" before it?

I'm new to DesignStudio and BI in general and would very much appreciate to understand the solution one step after the other.

Thank you in advance.

I

[former_member597402]

button-hover-text-display.png

Hello Guys ,

This is my layout and i want to apply the above Css to Display the text on button hover .

Example : Hover on button_2 show Text_3

Can Anyone help me with this

Thank You

[Former Member]

Another way to achieve it with css:

An easy (easy to understand/easy to use) way to display some content such as custom text when a user hovers over a Design Studio Component is by using the following kind of css code/logic:

Use ":hover" together with ":after" together with "content".

CSS ":hover" Selector: The :hover selector is used to select elements when you mouse over them.

CSS - The ::after Pseudo-element: The ::after pseudo-element can be used to insert some content after the content of an element.

CSS "content" Property: The content property is used with the :before and :after pseudo-elements, to insert generated content.

So you insert some content right after an element and position it with some css positioning and make it visible only when a user moves the mouse over (hover) the element.

Example: Edit fiddle - JSFiddle

[Former Member]

1.  I used Design Studio to create two textboxes:  The first one is the "Display Text" and the second one is the "Hover Text".

The HTML generated by Design Studio looks something like this:

<div class="sapUiLayoutAbsPos" data-sap-ui="__container33" id="__container33">
   <span class="displayText sapUiTv sapUiTvAlignLeft" aria-disabled="false" aria-invalid="false" role="document" tabindex="-1" dir="inherit" title="" data-sap-ui="TEXT_tf1" id="TEXT_tf1">Display Text</span>
</div>

<div class="sapUiLayoutAbsPos" data-sap-ui="__container34" id="__container34">
    <span class="hoverTooltip sapUiTv sapUiTvAlignLeft" aria-disabled="false" aria-invalid="false" role="document" tabindex="-1" dir="Inherit" title="" data-sap-ui="HOVER_tf1" id="HOVER_tf1">This is a hover tooltip to explain stuff. </span>
</div>

2. I used this CSS to style the "Hover Text" that looks similar to a tooltip.  When you hover over the "Display Text" then the "Hover Text" displays above in a styled tooltip.

3. The end results looks like this:

Check out my JSFiddle for the HTML and CSS code: Edit fiddle - JSFiddle

[Former Member]

Hi Anders,

Are you trying a popup component when you are hovering over the text?

Regards,

Adlin

[Former Member]

Adlin, yes that is what I try to achive.

Im using the CSS Class and HTML code as in the link above but I can not get it to work. I thought I can also use my own CSS Class and not only that ones that is given by default in Design Studio. The hover function in Design Studio seems only available for images. For text I need to make some kind of CSS and coding.

[Former Member]

Hi Anders,

I don't think this is possible right now. Someone please correct me if I'm wrong.

Did you call the class in the application anywhere?

Did you check http://scn.sap.com/docs/DOC-44531 for the CSS classes used in Design Studio?

Regards,

Sjoerd

[Former Member]

I got this to work so I thought I could implement more or less any CSS Class.

http://scn.sap.com/community/businessobjects-design-studio/blog/2013/06/06/new-in-11-css-classes

[Former Member]

As Jeroen states there, the hover function only seems to work on images as of yet.

I'm not sure if more components will get hover functions in v1.2..