locked
Need CSS for dropdownlist item's tooltip RRS feed

  • Question

  • User-809753952 posted

    I have one drop down list control which is dynamically populated from database. I am able to show title text for every items in the dropdownlist on mouse over event. I don't know how to style the title text. Please help.

    Wednesday, January 10, 2018 12:54 PM

All replies

  • User1400794712 posted

    Hi mnmhemaj,

    I am able to show title text for every items in the dropdownlist on mouse over event.

    What do you mean for 'title text'? Do you mean the option? If so , you just need to add some css style for it:

    <style>
        option{
            font-size:20px;
            color:aquamarine;
        }
    </style>
    <asp:DropDownList CssClass="dropdown" ID="DropDownList1" runat="server" Width="100px" >
    </asp:DropDownList>

    If my understanding is not correct, please post the relative code here and I can understand your requirement better.

    Best Regards,

    Daisy

    Thursday, January 11, 2018 5:38 AM
  • User-809753952 posted

    Hi X.Daisy

    Thanks for your reply.

    I mean the title text is the tooltip for every option item.

    I need style for the tooltip, not for options.

    Thursday, January 11, 2018 7:46 AM
  • User1400794712 posted

    Hi mnmhemaj,

    Kendo.ui provides us tooltip for dropdown list. And we can define the tooltip content and style by ourself. Here is the demo about it:

    https://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/appearance/show-tooltip-for-items 

    (Click on 'Open In Dojo' in it, you will find the full code.)

    Relative JS files:

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

    In kendoTooltip event, we can fill the tooltip in content function, as you can see in the code, we can use HTML tags and css style in it. Then you can style the tooltip by yourself. For example:

    var result = '<h3 style="color:blue;">' + item.name + '</h3>' +
                 '<h4 style="background-color:red;">' + item.email + '</h4>' +
                 'Address: <hr />' +
                 '<p>Street: ' + item.address.street + '</p>' +
                 '<p>Suite: ' + item.address.suite + '</p>' +
                 '<p>ZIP Code: ' + item.address.zipcode + '</p>';

    Then how it works:

    Best Regards,

    Daisy

    Friday, January 12, 2018 3:20 AM
  • User-809753952 posted

    Hi Daisy! Kendo is a licensed product. We have to buy it , if we want to use . :(

    Friday, January 12, 2018 9:11 AM