1. An Nguyen

    An Nguyen bụi Ban quản trị

    27/9/14
    #1
    Bạn muốn hiện tooltip như vậy không
    2014-10-01_233448.png
    Sau đây mình sẽ hướng dẫn chi tiết từng bước thực hiện
    Bước 1: HTML

    Tìm trong file Views\Shared\_ProductBox.cshtml
    Tìm
    HTML:
    1.  
    2. <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
    Thêm và sửa thuộc tính titlemasterTooltip
    HTML:
    1.  
    2. <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Html.Raw(Model.ShortDescription)" class="masterTooltip"/>
    3.  
    title là nội dung muốn hiện tooltip, @Html.Raw(Model.ShortDescription) chính là mô tả ngắn gọn về sản phẩm

    Bước 2: CSS
    Thêm đoạn CSS sau:
    HTML:
    1. .tooltip {
    2.     display:none;
    3.     position:absolute;
    4.     border:1px solid #333;
    5.     background-color:#161616;
    6.     border-radius:5px;
    7.     padding:10px;
    8.     color:#fff;
    9.     font-size:12px;
    10.     white-space:pre-line;
    11.     text-align: left;
    12. }
    13.  
    Đây là thiết lập css cho tooltip

    Bước 3: Jquery
    Tạo và chèn script này vào Views\Shared\_Root.Head.cshtml
    HTML:
    1. <script type="text/javascript">
    2. $(document).ready(function() {
    3. // Tooltip only Text
    4. $('.masterTooltip').hover(function(){
    5.         // Hover over code
    6.         var title = $(this).attr('title');
    7.         $(this).data('tipText', title).removeAttr('title');
    8.         $('<p class="tooltip"></p>')
    9.         .text(title)
    10.         .appendTo('body')
    11.         .fadeIn('slow');
    12. }, function() {
    13.         // Hover out code
    14.         $(this).attr('title', $(this).data('tipText'));
    15.         $('.tooltip').remove();
    16. }).mousemove(function(e) {
    17.         var mousex = e.pageX + 20; //Get X coordinates
    18.         var mousey = e.pageY + 10; //Get Y coordinates
    19.         $('.tooltip')
    20.         .css({ top: mousey, left: mousex })
    21. });
    22. });
    Có thể thay đổi tốc độ hiển thị tooltip ở dòng .fadeIn

    Chúc mọi người thực hành tốt nhé


    Tham khảo: alessioatzeni
     
    Sửa lần cuối: 1/10/14
    2
    KenMTkju47 thích bài này.
    KenMT kju47 thích bài này
    Đang tải...
    • ngày tạo

      An Nguyen 27/9/14
    • trả lời cuối

      KenMT 13/1/16
    • 2,407

      lượt xem

    • 2

      trả lời

    • 2

      lượt thích

  2. Tarzan

    Tarzan NopNew

    9/1/16
    #2
    Bài viết hữu ích quá! Cảm ơn bạn!
     
  3. KenMT

    KenMT NopActive

    13/1/16
    #3
    Hay ....
     
Đã lưu nháp Draft deleted
Đang tải...