Skip to Content

Hover on text popup textbox

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

Add a comment
10|10000 characters needed characters exceeded

Related questions

6 Answers

  • Best Answer
    author's profile photo Former Member
    Former Member
    Posted on Nov 18, 2013 at 04:41 PM

    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


    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member

      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

  • author's profile photo Former Member
    Former Member
    Posted on Nov 18, 2013 at 10:59 AM

    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

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Nov 18, 2013 at 12:28 PM

    Hi Anders,

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

    Regards,

    Adlin

    Add a comment
    10|10000 characters needed characters exceeded

    • 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.

  • author's profile photo Former Member
    Former Member
    Posted on May 01, 2014 at 03:55 PM

    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


    Capture.PNG (2.1 kB)
    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Sep 19, 2014 at 08:32 AM

    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

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Oct 22, 2019 at 10:35 AM

    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


    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.